@optiaxiom/react 3.0.0-next.2 → 3.0.0-next.4

package/dist/esm/packages/react/src/suggestion/SuggestionManualTrigger.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect, useState } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import '../avatar/AvatarGroup.js';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { useSuggestions } from '../surface/useSuggestions.js';
+
+const SuggestionManualTrigger = forwardRef((props, ref) => {
+  const surface = useSurface("property");
+  const register = useEffectEvent(
+    surface?.suggestionPopover.register ?? (() => {
+    })
+  );
+  useEffect(() => {
+    return register();
+  }, []);
+  const [pending, setPending] = useState(false);
+  const suggestions = useSuggestions("property", "value");
+  const suggestion = suggestions?.[0];
+  const acceptSuggestion = useEffectEvent(() => {
+    if (!suggestion) {
+      return;
+    }
+    surface?.accept(suggestion.id);
+    setPending(false);
+  });
+  useEffect(() => {
+    acceptSuggestion();
+  }, [suggestion?.id]);
+  if (!surface) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      "aria-label": "Opal suggestion",
+      disabled: pending,
+      icon: /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
+      loading: pending,
+      onClick: () => {
+        setPending(true);
+        surface.track({ name: "requested", value: surface.value });
+      },
+      ref,
+      size: "sm",
+      ...props
+    }
+  );
+});
+SuggestionManualTrigger.displayName = "@optiaxiom/react/SuggestionManualTrigger";
+
+export { SuggestionManualTrigger };

package/dist/esm/packages/react/src/suggestion/SuggestionPopover.js

@@ -1,75 +1,14 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { IconCheck } from '@optiaxiom/icons';
-import { forwardRef, useEffect } from 'react';
-import { Avatar } from '../avatar/Avatar.js';
-import '../avatar/AvatarGroup.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Heading } from '../heading/Heading.js';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { Popover } from '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import { PopoverContent } from '../popover/PopoverContent.js';
-import { PopoverTrigger } from '../popover/PopoverTrigger.js';
-import { Separator } from '../separator/Separator.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import '@optiaxiom/globals';
 import { useSurface } from '../surface/useSurface.js';
-import { useSuggestions } from '../surface/useSuggestions.js';
-import { Text } from '../text/Text.js';
+import { SuggestionAutoPopover } from './SuggestionAutoPopover.js';
+import { SuggestionManualTrigger } from './SuggestionManualTrigger.js';
 
 const SuggestionPopover = forwardRef((props, ref) => {
   const surface = useSurface("property");
-  const register = useEffectEvent(
-    surface?.suggestionPopover.register ?? (() => {
-    })
-  );
-  useEffect(() => {
-    return register();
-  }, []);
-  const suggestions = useSuggestions("property", "value");
-  const suggestion = suggestions?.find((s) => s.value !== surface?.value);
-  if (!suggestion || !surface) {
-    return null;
-  }
-  const text = surface.renderSuggestionValue ? surface.renderSuggestionValue(suggestion.value) : String(suggestion.value);
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        appearance: "subtle",
-        "aria-label": "Opal suggestion",
-        icon: /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
-        ref,
-        size: "sm",
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsxs(PopoverContent, { "aria-label": "Suggestion", fontSize: "sm", gap: "4", p: "12", children: [
-      /* @__PURE__ */ jsx(Text, { children: text }),
-      suggestion.reason && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Separator, { my: "8" }),
-        /* @__PURE__ */ jsx(Heading, { fontSize: "sm", level: "4", children: "Why this was suggested" }),
-        /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: suggestion.reason })
-      ] }),
-      /* @__PURE__ */ jsx(Separator, { my: "8" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          icon: /* @__PURE__ */ jsx(IconCheck, {}),
-          justifyContent: "center",
-          onClick: () => {
-            surface.accept(suggestion.id);
-          },
-          size: "sm",
-          children: "Accept"
-        }
-      )
-    ] })
-  ] });
+  return surface?.manualSuggestion ? /* @__PURE__ */ jsx(SuggestionManualTrigger, { ref, ...props }) : /* @__PURE__ */ jsx(SuggestionAutoPopover, { ref, ...props });
 });
 SuggestionPopover.displayName = "@optiaxiom/react/SuggestionPopover";
 

package/dist/esm/packages/react/src/switch/Switch-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BM9-6W7t.css';
-import './../../../../assets/src/switch/Switch.css.ts.vanilla-Ct63lVNr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C7ifMcvG.css';
+import './../../../../assets/src/switch/Switch.css.ts.vanilla-D9doZcfo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control$1 = recipeRuntime({base:[{px:'12',py:'2',rounded:'full',transition:'colors'},'p67j61']});
-var input$2 = recipeRuntime({base:'_4nqv99'});
-var root$3 = recipeRuntime({base:['bdg91v','_100qgzd']});
-var thumb = recipeRuntime({base:[{display:'block',rounded:'full',transition:'all'},'_1dsu0ye'],variants:{size:{md:'_9o9srw',lg:'cgciki'}}});
+var control$1 = recipeRuntime({base:[{display:'grid',rounded:'full'},'_15y02w7'],variants:{size:{md:[{mt:'2'},'_1v2r8j5'],lg:['oogpub']}}});
+var input$2 = recipeRuntime({base:'_1wl3ym8'});
+var root$3 = recipeRuntime({base:['jshdco','waoqek']});
+var thumb = recipeRuntime({base:[{display:'block',rounded:'full',transition:'all'},'bdycs3']});
 
 export { control$1 as control, input$2 as input, root$3 as root, thumb };

package/dist/esm/packages/react/src/switch/Switch.js

@@ -26,7 +26,7 @@ const Switch = forwardRef(
           ...restProps
         }
       ),
-      /* @__PURE__ */ jsx(ToggleInputControl, { ...control(), children: /* @__PURE__ */ jsx(Box, { ...thumb({ size }) }) }),
+      /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ size }), children: /* @__PURE__ */ jsx(Box, { ...thumb() }) }),
       (children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { pt: size === "lg" ? "2" : "0", children: [
         children && /* @__PURE__ */ jsx(ToggleInputLabel, { fontWeight: "400", children }),
         description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/table/Table.css.ts.vanilla-B1Mcrfjm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/table/Table.css.ts.vanilla-Bzf-yEqL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var table = recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_1eulftn'],variants:{layout:{auto:['_1qrtxs9'],fixed:[{display:'grid'},'_9khxot']}}});
-var wrapper = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'xl'},'_1r12jj8']});
+var table = recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_1b7squ3'],variants:{layout:{auto:['_1yxrki8'],fixed:[{display:'grid'},'_1i84qu5']}}});
+var wrapper = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'xl'},'oz5tnn']});
 
 export { table, wrapper };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/table/TableBody.css.ts.vanilla-BwsJfRaT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/table/TableBody.css.ts.vanilla-BhbdIN8M.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:['_1iks5do']});
+var body = recipeRuntime({base:['_1gi7rda']});
 
 export { body };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-BPRD8lJ4.css';
-import './../../../../assets/src/table/TableCell.css.ts.vanilla-BDwTP7DA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-DFJpdLbP.css';
+import './../../../../assets/src/table/TableCell.css.ts.vanilla-Dmbe_FQz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell$1 = recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'oy1mci'],variants:{pinned:{false:'aglly5',true:'_1blmwol'}}});
+var cell$1 = recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'vo7bv'],variants:{pinned:{false:'_8uxmtd',true:'_1q8onzh'}}});
 
 export { cell$1 as cell };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/table/TableHeader.css.ts.vanilla-Dfd0uBuo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/table/TableHeader.css.ts.vanilla-vsVrb8X6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({variants:{pinned:{false:{},true:'_1gpoebc'}}});
+var header = recipeRuntime({variants:{pinned:{false:{},true:'_1yl18bt'}}});
 
 export { header };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/table/TableHeaderCell.css.ts.vanilla-C5HjJZf6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/table/TableHeaderCell.css.ts.vanilla-BgMHoDie.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{borderColor:'border.tertiary'},'acmqt0'],variants:{pinned:{false:'kv0801',true:'toy67o'}}});
-var content = recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontFamily:'mono',fontSize:'xs',fontWeight:'400',size:'full',textTransform:'uppercase'},'_17ec6pu']});
+var cell = recipeRuntime({base:[{borderColor:'border.tertiary'},'_1mgp75i'],variants:{pinned:{false:'_1x9e373',true:'_1v9vot'}}});
+var content = recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontFamily:'mono',fontSize:'xs',fontWeight:'400',size:'full',textTransform:'uppercase'},'zbj04j']});
 
 export { cell, content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-BPRD8lJ4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-DFJpdLbP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var row = recipeRuntime({base:['_1x2sk53',{transition:'colors',w:'full'},'wr1m5d']});
+var row = recipeRuntime({base:['_1ywu7pr',{transition:'colors',w:'full'},'_1qdkrmu']});
 
 export { row };

package/dist/esm/packages/react/src/tabs/Tabs-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/tabs/Tabs.css.ts.vanilla-C2Gx16fg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/tabs/Tabs.css.ts.vanilla-20-J6kYw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var tabs = recipeRuntime({base:[{display:'flex'},'_16gu27l']});
+var tabs = recipeRuntime({base:[{display:'flex'},'_1h6lzkq']});
 
 export { tabs };

package/dist/esm/packages/react/src/tabs/TabsList-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/tabs/TabsList.css.ts.vanilla-DnmXGTEG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/tabs/TabsList.css.ts.vanilla-BPeDAJ53.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'_1ptjowh']});
+var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'yk3ejv']});
 
 export { list };

package/dist/esm/packages/react/src/tabs/TabsTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/tabs/TabsTrigger.css.ts.vanilla-B7kIZFtx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/tabs/TabsTrigger.css.ts.vanilla-Bl-r_w1T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{gap:'8',justifyContent:['center','flex-start'],py:'6',rounded:'sm',transition:'colors'},'_1978xfp']});
-var trigger = recipeRuntime({base:['el0vs2',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'j33h32']});
+var content = recipeRuntime({base:[{gap:'8',justifyContent:['center','flex-start'],py:'6',rounded:'sm',transition:'colors'},'ysj0a8']});
+var trigger = recipeRuntime({base:['_1vkba1n',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'_1w2caq']});
 
 export { content, trigger };

package/dist/esm/packages/react/src/text/Text-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/text/Text.css.ts.vanilla-BFPuoXJ8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/text/Text.css.ts.vanilla-rJ9Dt76f.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var text = recipeRuntime((function(){var x={variants:{lineClamp:{'1':[{overflow:'hidden'},'l8r5ub','_1hbgp5g','_1x67vg9'],'2':[undefined,'l8r5ub','_1hbgp5g','jxob2e'],'3':[undefined,'l8r5ub','_1hbgp5g','_1pfij32'],'4':[undefined,'l8r5ub','_1hbgp5g','_1ax0dc2']},truncate:{true:[undefined,'l8r5ub',{whiteSpace:'nowrap'}]}}};x.variants.lineClamp['2'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['3'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['4'][0]=x.variants.lineClamp['1'][0];x.variants.truncate.true[0]=x.variants.lineClamp['1'][0];return x;}()));
+var text = recipeRuntime((function(){var x={variants:{lineClamp:{'1':[{overflow:'hidden'},'_1w24m0q','_1lg9s59','_1mr6vie'],'2':[undefined,'_1w24m0q','_1lg9s59','clot0v'],'3':[undefined,'_1w24m0q','_1lg9s59','_17dngfq'],'4':[undefined,'_1w24m0q','_1lg9s59','_1t7ab8j']},truncate:{true:[undefined,'_1w24m0q',{whiteSpace:'nowrap'}]}}};x.variants.lineClamp['2'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['3'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['4'][0]=x.variants.lineClamp['1'][0];x.variants.truncate.true[0]=x.variants.lineClamp['1'][0];return x;}()));
 
 export { text };

package/dist/esm/packages/react/src/textarea/Textarea-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/textarea/Textarea.css.ts.vanilla-DjFrNSFX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/textarea/Textarea.css.ts.vanilla-DoEClmgD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'khvfef'});
+var addon = recipeRuntime({base:'_1pn11tc'});
 
 export { addon };

package/dist/esm/packages/react/src/textarea/TextareaAutosize-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/textarea/TextareaAutosize.css.ts.vanilla-CUgU4QIG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/textarea/TextareaAutosize.css.ts.vanilla-wHBhVrnk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var shadow = recipeRuntime({base:['_1bu1scw','ypwa8z']});
-var textarea = recipeRuntime({base:['_1bu1scw','_8cnwht'],variants:{resize:{auto:{overflow:'hidden'},none:{},vertical:{}}}});
-var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_1tsdhbg','_12pp8z1'],'2':['_1tsdhbg','b0k2iz'],'3':['_1tsdhbg','pikxri'],'4':['_1tsdhbg','_10tio5e'],'5':['_1tsdhbg','_7xwpms']},resize:{auto:{},none:{},vertical:'s1o476'}}});
+var shadow = recipeRuntime({base:['_1xboxun','_1dcg649']});
+var textarea = recipeRuntime({base:['_1xboxun','_1ye73pr'],variants:{resize:{auto:{overflow:'hidden'},none:{},vertical:{}}}});
+var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['h2cl0v','_1qr1eu2'],'2':['h2cl0v','_56lz87'],'3':['h2cl0v','_4zdjeg'],'4':['h2cl0v','_1jlwjrq'],'5':['h2cl0v','_3wxxjx']},resize:{auto:{},none:{},vertical:'_1taqstw'}}});
 
 export { shadow, textarea, wrapper };

package/dist/esm/packages/react/src/toast/Toast-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BuxajBx-.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-CU2GIV3k.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BaFBw4oL.css';
+import './../../../../assets/src/toast/Toast.css.ts.vanilla-DemlfqD4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon$3 = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_13w035m']});
-var offsetVar = 'var(--_1n8420w)';
-var root$2 = recipeRuntime({base:['_1e93mj1',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_1k2qfei'],variants:{intent:{danger:'_1hlany8',information:'cra0u',neutral:'_1sgl7hh',success:'cvsgcw',warning:'_1mawwyy'}}});
+var icon$3 = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_17r8mns']});
+var offsetVar = 'var(--_1phqsrv)';
+var root$2 = recipeRuntime({base:['zxekb8',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_12sh764'],variants:{intent:{danger:'eiasj',information:'u96pok',neutral:'dt4ma2',success:'_18rya1w',warning:'_1qo3l3c'}}});
 
 export { icon$3 as icon, offsetVar, root$2 as root };

package/dist/esm/packages/react/src/toast/ToastProvider-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BuxajBx-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BaFBw4oL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var gap = '16';
-var viewport = recipeRuntime({base:[{flexDirection:'column',gap:'16',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'yz76fc'],variants:{position:{bottom:'c99zk7','bottom-left':'a25qb1','bottom-right':['right-scroll-bar-position','udahuy'],top:'_1pzyi95','top-left':'_1yprey0','top-right':['right-scroll-bar-position','_2rf4hf']}}});
+var viewport = recipeRuntime({base:[{flexDirection:'column',gap:'16',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'k83uxn'],variants:{position:{bottom:'cay7og','bottom-left':'_13w7pm0','bottom-right':['right-scroll-bar-position','md45h8'],top:'k8wjb5','top-left':'_2mptu','top-right':['right-scroll-bar-position','_1jctf7y']}}});
 
 export { gap, viewport };

package/dist/esm/packages/react/src/toast/ToastTitle-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/toast/ToastTitle.css.ts.vanilla-f9fKW24o.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var title = recipeRuntime({base:[{flex:'1'},'est2lx']});
+
+export { title };

package/dist/esm/packages/react/src/toast/ToastTitle.js

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixToast from '@radix-ui/react-toast';
 import { forwardRef } from 'react';
 import { Text } from '../text/Text.js';
+import { title } from './ToastTitle-css.js';
 
 const ToastTitle = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Text, { asChild: true, flex: "1", ...props, children: /* @__PURE__ */ jsx(RadixToast.Title, { ref, children }) });
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Text, { asChild: true, lineClamp: "2", ...title({}, className), ...props, children: /* @__PURE__ */ jsx(RadixToast.Title, { ref, children }) });
   }
 );
 ToastTitle.displayName = "@optiaxiom/react/ToastTitle";

package/dist/esm/packages/react/src/toggle-input/ToggleInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BM9-6W7t.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C7ifMcvG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_1r3rpg5',{alignItems:'start',display:'inline-flex',gap:'8'},'yjhpi9']});
+var toggleInput = recipeRuntime({base:['_1m417lb',{alignItems:'start',display:'inline-flex',gap:'8'},'nn3xdq']});
 
 export { toggleInput };

package/dist/esm/packages/react/src/toggle-input/ToggleInputControl-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BM9-6W7t.css';
-import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CPkzFcUA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C7ifMcvG.css';
+import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BoUhDD4p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control$3 = recipeRuntime({base:['_1371qs8']});
+var control$3 = recipeRuntime({base:['xwe8qs']});
 
 export { control$3 as control };

package/dist/esm/packages/react/src/toggle-input/ToggleInputHiddenInput-css.js

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DrdllxCC.css';
 
-var className = 'gkgbx4';
+var className = '_6gfohk';
 
 export { className };

package/dist/esm/packages/react/src/tooltip/TooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var content$3 = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',maxW:'xs',px:'12',py:'8',rounded:'md',z:'tooltip'}],variants:{disableHoverableContent:{false:{},true:{pointerEvents:'none'}}}});

package/dist/esm/packages/react/src/transition/Transition-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-Ci-0wFa5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-B8KgYl4X.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'erws0c',variants:{duration:{sm:'et5c6l',md:'r486ry',lg:'dij78g'}}});
+var transition = recipeRuntime({base:'vtqhmf',variants:{duration:{sm:'mirexd',md:'le1p1',lg:'h52oq'}}});
 
 export { transition };

package/dist/esm/unstable.js

@@ -10,6 +10,7 @@ export { createDialogKit, dialogkit } from './packages/react/src/dialog-kit/dial
 export { useDialogKit } from './packages/react/src/dialog-kit/useDialogKit.js';
 export { FileUpload } from './packages/react/src/file-upload/FileUpload.js';
 export { FileUploadDropzone } from './packages/react/src/file-upload/FileUploadDropzone.js';
+export { FileUploadList } from './packages/react/src/file-upload/FileUploadList.js';
 export { FileUploadTrigger } from './packages/react/src/file-upload/FileUploadTrigger.js';
 export { useFileUploadTrigger } from './packages/react/src/file-upload/useFileUploadTrigger.js';
 export { Highlight } from './packages/react/src/highlight/Highlight.js';

package/dist/index.d.ts

@@ -1325,12 +1325,12 @@ declare const input: (props?: {
 };
 type InputVariants = RecipeVariants<typeof input>;
 
-declare const control: (props?: {
+declare const control$1: (props?: {
     size?: "md" | "lg" | "xl" | undefined;
 } | undefined, className?: string) => {
     className: string;
 };
-type ControlVariants = RecipeVariants<typeof control>;
+type ControlVariants = RecipeVariants<typeof control$1>;
 
 type InputControlProps<T extends ElementType = "input" | "textarea", P = unknown> = BoxProps<T, ExtendProps<ControlVariants & {
     /**
@@ -1917,12 +1917,12 @@ declare const ListboxSeparator: react.ForwardRefExoticComponent<Omit<NonNullable
     className?: string;
 }>, never> & Omit<Omit<RadixSeparator.SeparatorProps & react.RefAttributes<HTMLDivElement>, "ref">, "color" | "asChild" | "className" | "orientation"> & react.RefAttributes<HTMLDivElement>, "ref">, "animation" | "fontFamily" | "fontSize" | "size" | "backgroundImage" | "borderColor" | "color" | "cursor" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "p" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridAutoRows" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
-declare const thumb: (props?: {
+declare const control: (props?: {
     size?: "md" | "lg" | undefined;
 } | undefined, className?: string) => {
     className: string;
 };
-type SwitchVariants = RecipeVariants<typeof thumb>;
+type SwitchVariants = RecipeVariants<typeof control>;
 
 type SwitchProps = BoxProps<typeof ToggleInputHiddenInput, SwitchVariants & {
     /**

package/dist/unstable.d.ts

@@ -240,6 +240,50 @@ declare const FileUploadDropzone: react.ForwardRefExoticComponent<{
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
+type FileUploadListItemProps = BoxProps<"div"> & {
+    /**
+     * The file item to be previewed in the list item.
+     */
+    item: {
+        /**
+         * The file object to be previewed.
+         */
+        file: File;
+        /**
+         * The current upload status of the file.
+         */
+        status: "complete" | "error" | "uploading";
+    };
+    /**
+     * Callback function called when the remove button is clicked
+     */
+    onRemove?: () => void;
+};
+
+type FileUploadListProps = BoxProps<"div"> & {
+    /**
+     * The list of file items to be previewed.
+     */
+    items: FileUploadListItemProps["item"][];
+    /**
+     * Callback function called when a file is removed
+     */
+    onRemove?: (item: FileUploadListItemProps["item"]) => void;
+};
+declare const FileUploadList: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
+    asChild?: boolean;
+    className?: string;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & {
+    /**
+     * The list of file items to be previewed.
+     */
+    items: FileUploadListItemProps["item"][];
+    /**
+     * Callback function called when a file is removed
+     */
+    onRemove?: (item: FileUploadListItemProps["item"]) => void;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type FileUploadTriggerProps = ButtonProps;
 /**
  * @group FileUpload
@@ -923,6 +967,7 @@ declare const SuggestionPopover: react.ForwardRefExoticComponent<Omit<{
 declare function useSurface(type?: NonNullable<ReturnType<typeof unstable_useSurfaceContext>>["type"]): {
     accept: (suggestionId: string) => void;
     executeTool: (name: string, parameters: unknown) => Promise<void> | void;
+    manualSuggestion?: boolean;
     metadata: Record<string, Omit<{
         data?: Record<string, unknown>;
         name: string;
@@ -988,6 +1033,9 @@ declare function useSurface(type?: NonNullable<ReturnType<typeof unstable_useSur
     } | {
         name: "removed";
         value: unknown;
+    } | {
+        name: "requested";
+        value: unknown;
     } | {
         name: "viewed";
     }), surfaces?: {
@@ -1051,5 +1099,5 @@ declare const VisuallyHidden: react.ForwardRefExoticComponent<Omit<RadixVisually
     disabled?: boolean;
 } & react.RefAttributes<HTMLSpanElement>>;
 
-export { DataTableExpandableCell, DataTableExpandableHeader, DataTableHeaderCell, DetailsPanel, DetailsPanelBody, DetailsPanelFooter, DetailsPanelHeader, FileUpload, FileUploadDropzone, FileUploadTrigger, Highlight, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, Layout, LayoutContent, Pill, PillGroup, PillMenu, PillMenuContent, PillMenuTrigger, Range, Sortable, SortableGroup, SortableHandle, SortableItem, Spotlight, SpotlightContent, SpotlightTrigger, SuggestionAlert, SuggestionPopover, Time, VisuallyHidden, useDialogKit, useFileUploadTrigger, useSurface };
-export type { DataTableExpandableCellProps, DataTableExpandableHeaderProps, DataTableHeaderCellProps, DetailsPanelBodyProps, DetailsPanelFooterProps, DetailsPanelHeaderProps, DetailsPanelProps, FileUploadDropzoneProps, FileUploadProps, FileUploadTriggerProps, HighlightProps, HoverCardContentProps, HoverCardProps, HoverCardTriggerProps, InlineInputProps, LayoutContentProps, LayoutProps, PillGroupProps, PillMenuContentProps, PillMenuProps, PillMenuTriggerProps, PillProps, RangeProps, SortableGroupProps, SortableHandleProps, SortableItemProps, SortableProps, SpotlightContentProps, SpotlightProps, SpotlightTriggerProps, TimeProps, VisuallyHiddenProps };
+export { DataTableExpandableCell, DataTableExpandableHeader, DataTableHeaderCell, DetailsPanel, DetailsPanelBody, DetailsPanelFooter, DetailsPanelHeader, FileUpload, FileUploadDropzone, FileUploadList, FileUploadTrigger, Highlight, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, Layout, LayoutContent, Pill, PillGroup, PillMenu, PillMenuContent, PillMenuTrigger, Range, Sortable, SortableGroup, SortableHandle, SortableItem, Spotlight, SpotlightContent, SpotlightTrigger, SuggestionAlert, SuggestionPopover, Time, VisuallyHidden, useDialogKit, useFileUploadTrigger, useSurface };
+export type { DataTableExpandableCellProps, DataTableExpandableHeaderProps, DataTableHeaderCellProps, DetailsPanelBodyProps, DetailsPanelFooterProps, DetailsPanelHeaderProps, DetailsPanelProps, FileUploadDropzoneProps, FileUploadListProps, FileUploadProps, FileUploadTriggerProps, HighlightProps, HoverCardContentProps, HoverCardProps, HoverCardTriggerProps, InlineInputProps, LayoutContentProps, LayoutProps, PillGroupProps, PillMenuContentProps, PillMenuProps, PillMenuTriggerProps, PillProps, RangeProps, SortableGroupProps, SortableHandleProps, SortableItemProps, SortableProps, SpotlightContentProps, SpotlightProps, SpotlightTriggerProps, TimeProps, VisuallyHiddenProps };

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.4",
   "files": [
     "dist/**",
     "LICENSE"
@@ -24,6 +24,7 @@
       "import": "./dist/esm/css-runtime.js",
       "require": "./dist/cjs/css-runtime.cjs"
     },
+    "./package.json": "./package.json",
     "./unstable": {
       "types": "./dist/unstable.d.ts",
       "import": "./dist/esm/unstable.js",
@@ -80,7 +81,7 @@
     "recharts": "^3.8.1",
     "use-sync-external-store": "^1.6.0",
     "@optiaxiom/globals": "^3.0.0-next.2",
-    "@optiaxiom/icons": "^1.1.2-next.2"
+    "@optiaxiom/icons": "^1.1.3-next.2"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",