@optiaxiom/react 1.5.5 → 1.5.7

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BlfhQ0IJ.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-B66U_s0W.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-CkaiVJU3.css';
+import './../../../../assets/src/toast/Toast.css.ts.vanilla-oqDsuxfc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'wjlgy8']});
-var offsetVar = 'var(--_1lrb8z9)';
-var root = recipeRuntime({base:['_2hxspg',{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']},'zh9bss'],variants:{intent:{danger:'_1bxjuja',information:'v2dg5',neutral:'_16vbkzp',success:'_1c3g558',warning:'qca0qv'}}});
+var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'s1jw1o']});
+var offsetVar = 'var(--mcun6h)';
+var root = recipeRuntime({base:['_1oie5ir',{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']},'msfgr0'],variants:{intent:{danger:'_1kkv5c',information:'_13y2z6q',neutral:'xf6xfy',success:'_18zg0zl',warning:'_8bjfaz'}}});
 
 export { icon, offsetVar, root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-BlfhQ0IJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-CkaiVJU3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var gap = '16';
-var viewport = recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'bem19v'],variants:{position:{bottom:'_1jqaydr','bottom-left':'_18r59u6','bottom-right':'_14ctbh0',top:'cor61p','top-left':'_5fd36o','top-right':'_10b8ytt'}}});
+var viewport = recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1txgila'],variants:{position:{bottom:'veao53','bottom-left':'_6fupa4','bottom-right':'y3gdyj',top:'f6r1md','top-left':'jwvk71','top-right':'_146trge'}}});
 
 export { gap, viewport };

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

@@ -62,7 +62,7 @@ const ToastProvider = forwardRef(
               onOpenChange: () => toasterProp.remove(id),
               open,
               toastRef: ref2,
-              children: /* @__PURE__ */ jsxs(Toast, { intent: toast.type, children: [
+              children: /* @__PURE__ */ jsxs(Toast, { intent: toast.intent || toast.type, children: [
                 /* @__PURE__ */ jsx(ToastTitle, { children: toast.title }),
                 toast.action && /* @__PURE__ */ jsx(ToastAction, { altText: toast.action, onClick: toast.onAction, children: toast.action })
               ] }, id)

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BCilgzn2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-SpZDsPH1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_12r6siu',{alignItems:'start',display:'inline-flex',flexDirection:'row',gap:'8'},'_1w2u6w6']});
+var toggleInput = recipeRuntime({base:['_1jbjxz2',{alignItems:'start',display:'inline-flex',flexDirection:'row',gap:'8'},'_1i422ky']});
 
 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-DKXh4Gs6.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BCilgzn2.css';
-import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BvofMiCy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-SpZDsPH1.css';
+import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CjXYpuJi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_6fe6o1']});
+var control = recipeRuntime({base:['_15hwkl1']});
 
 export { control };

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

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
 
-var className = 'o8uo9m';
+var className = '_1iu9ji7';
 
 export { className };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var content = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',px:'12',py:'8',rounded:'md',z:'tooltip'}]});

package/dist/esm/packages/react/src/tooltip/TooltipRoot.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useRef } from 'react';
 import { TooltipProvider } from './TooltipContext.js';
 
 function TooltipRoot({
@@ -13,6 +14,7 @@ function TooltipRoot({
   open: openProp,
   ...props
 }) {
+  const triggerRef = useRef(null);
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/TooltipRoot",
     defaultProp: defaultOpen,
@@ -23,13 +25,35 @@ function TooltipRoot({
     RadixTooltip.Root,
     {
       delayDuration,
-      onOpenChange: setOpen,
+      onOpenChange: openProp === void 0 ? (open2) => {
+        if (auto && open2 && triggerRef.current && !hasTruncatedContent(triggerRef.current)) {
+          return;
+        }
+        setOpen(open2);
+      } : setOpen,
       open,
       ...props,
-      children: /* @__PURE__ */ jsx(TooltipProvider, { auto, open, setOpen, children })
+      children: /* @__PURE__ */ jsx(TooltipProvider, { open, setOpen, triggerRef, children })
     }
   );
 }
 TooltipRoot.displayName = "@optiaxiom/react/TooltipRoot";
+const hasTruncatedContent = (element) => {
+  let truncated = false;
+  const elements = [element];
+  while (!truncated && elements.length) {
+    const element2 = elements.shift();
+    if (!(element2 instanceof HTMLElement)) {
+      continue;
+    }
+    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element2;
+    if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
+      truncated = true;
+      break;
+    }
+    elements.push(...element2.children);
+  }
+  return truncated;
+};
 
 export { TooltipRoot };

package/dist/esm/packages/react/src/tooltip/TooltipTrigger.js

@@ -2,61 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
 import { useTooltipContext } from './TooltipContext.js';
 
-const TooltipTrigger = forwardRef(({ asChild, children, onFocus, onPointerMove, ...props }, outerRef) => {
-  const { auto } = useTooltipContext("@optiaxiom/react/TooltipTrigger");
-  const innerRef = useRef(null);
-  const ref = useComposedRefs(innerRef, outerRef);
-  return /* @__PURE__ */ jsx(
-    RadixTooltip.Trigger,
-    {
-      asChild: true,
-      onFocus: (event) => {
-        onFocus?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (auto && innerRef.current && !hasTruncatedContent(innerRef.current)) {
-          event.preventDefault();
-        }
-      },
-      onPointerMove: (event) => {
-        onPointerMove?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (auto && innerRef.current && !hasTruncatedContent(innerRef.current)) {
-          event.preventDefault();
-        }
-      },
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "data-state", children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) })
-    }
-  );
+const TooltipTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
+  const { triggerRef } = useTooltipContext("@optiaxiom/react/TooltipTrigger");
+  const ref = useComposedRefs(triggerRef, outerRef);
+  return /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "data-state", children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) }) });
 });
 TooltipTrigger.displayName = "@optiaxiom/react/TooltipTrigger";
-const hasTruncatedContent = (element) => {
-  let truncated = false;
-  const elements = [element];
-  while (!truncated && elements.length) {
-    const element2 = elements.shift();
-    if (!(element2 instanceof HTMLElement)) {
-      continue;
-    }
-    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element2;
-    if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
-      truncated = true;
-      break;
-    }
-    elements.push(...element2.children);
-  }
-  return truncated;
-};
 
 export { TooltipTrigger };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-Q0H8i3_-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-C5JDwK5p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'v5k7qe',variants:{duration:{sm:'_1di90pq',md:'_1pshfr3',lg:'_9t0oxz'}}});
+var transition = recipeRuntime({base:'_3ls8oo',variants:{duration:{sm:'_1avvyyn',md:'_359vqd',lg:'_4k6z2y'}}});
 
 export { transition };

package/dist/esm/packages/react/src/transition/TransitionGroup.js

@@ -3,23 +3,21 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { TransitionGlobalConfig } from './TransitionGlobalConfig.js';
-import { TransitionGroupProvider } from './TransitionGroupContext.js';
+import { useTransitionGroupContext, TransitionGroupProvider } from './TransitionGroupContext.js';
 import { waitForAnimation } from './waitForAnimation.js';
 
 function TransitionGroup({
   children,
   onPresenceChange,
-  open,
+  open: openProp,
   presence: presenceProp
 }) {
   const [transitions, setTransitions] = useState(
     []
   );
-  const onMount = useCallback((ref) => {
+  const register = useCallback((ref) => {
     setTransitions((transitions2) => [...transitions2, ref]);
-  }, []);
-  const onUnmount = useCallback((ref) => {
-    setTransitions(
+    return () => setTransitions(
       (transitions2) => transitions2.filter((transition) => transition !== ref)
     );
   }, []);
@@ -29,6 +27,8 @@ function TransitionGroup({
     onChange: onPresenceChange,
     prop: presenceProp
   });
+  const { open: openParent } = useTransitionGroupContext("@optiaxiom/react/TransitionGroup") ?? {};
+  const open = openParent === false ? openParent : openProp;
   useEffect(() => {
     if (open) {
       const timer = setTimeout(() => {
@@ -58,10 +58,9 @@ function TransitionGroup({
   return /* @__PURE__ */ jsx(
     TransitionGroupProvider,
     {
-      onMount,
-      onUnmount,
       open,
       presence,
+      register,
       children: (open || presence) && childrenRef.current
     }
   );

package/dist/esm/packages/react/src/transition/useTransitionStatus.js

@@ -3,15 +3,14 @@ import { useEffect, useState } from 'react';
 import { useTransitionGroupContext } from './TransitionGroupContext.js';
 
 const useTransitionStatus = (ref) => {
-  const { onMount, onUnmount, open } = useTransitionGroupContext(
+  const { open, register } = useTransitionGroupContext(
     "useTransitionStatus"
   ) ?? {
     open: true
   };
   useEffect(() => {
-    onMount?.(ref);
-    return () => onUnmount?.(ref);
-  }, [onMount, onUnmount, ref]);
+    return register?.(ref);
+  }, [register, ref]);
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
     if (open) {

package/dist/esm/unstable.js

@@ -22,9 +22,9 @@ export { MenuTrigger } from './packages/react/src/menu/MenuTrigger.js';
 export { Pill } from './packages/react/src/pill/Pill.js';
 export { PillGroup } from './packages/react/src/pill/PillGroup.js';
 export { Sortable } from './packages/react/src/sortable/Sortable.js';
+export { SortableGroup } from './packages/react/src/sortable/SortableGroup.js';
 export { SortableHandle } from './packages/react/src/sortable/SortableHandle.js';
 export { SortableItem } from './packages/react/src/sortable/SortableItem.js';
-export { SortableList } from './packages/react/src/sortable/SortableList.js';
 export { Spotlight } from './packages/react/src/spotlight/Spotlight.js';
 export { SpotlightContent } from './packages/react/src/spotlight/SpotlightContent.js';
 export { SpotlightTrigger } from './packages/react/src/spotlight/SpotlightTrigger.js';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ComponentPropsWithRef, ReactNode, ComponentPropsWithoutRef, ElementType, RefObject, FocusEventHandler, ChangeEventHandler, ReactElement } from 'react';
-import { R as RecipeVariants, B as BoxProps, S as Sprinkles, a as ButtonProps, E as ExcludeProps, F as Flex, b as Button, c as ExtendProps, A as ActionsContent, C as Checkbox, I as Input, d as Calendar, e as CalendarProps, f as Box, g as ResponsiveArray, P as PopoverContent, h as PopoverContentProps, i as PopoverTrigger, M as ModalListbox, j as ButtonRoot, T as ToggleInputHiddenInput, k as InputControlProps, l as InputRoot } from './Link-CdEHV_MF.js';
-export { m as CheckboxProps, n as DialogContent, D as DialogContentProps, o as FlexProps, q as InputControl, p as InputProps, r as InputRootProps, s as Link, L as LinkProps, u as ListboxItemized, t as ListboxItemizedProps, G as LonghandProps, v as PopoverTriggerProps, J as TableHeaderCell, H as TableHeaderCellProps, y as mapResponsiveValue, z as normalizeResponsiveValue, x as sprinkles, w as vars } from './Link-CdEHV_MF.js';
+import { R as RecipeVariants, B as BoxProps, S as Sprinkles, a as ButtonProps, E as ExcludeProps, F as Flex, b as Button, c as ExtendProps, A as ActionsContent, C as Checkbox, I as Input, d as Calendar, e as CalendarProps, f as Box, g as ResponsiveArray, P as PopoverContent, h as PopoverContentProps, i as PopoverTrigger, M as ModalListbox, j as ButtonRoot, T as ToggleInputHiddenInput, k as InputControlProps, l as InputRoot } from './Link-BULPyyH9.js';
+export { m as CheckboxProps, n as DialogContent, D as DialogContentProps, o as FlexProps, q as InputControl, p as InputProps, r as InputRootProps, s as Link, L as LinkProps, u as ListboxItemized, t as ListboxItemizedProps, G as LonghandProps, v as PopoverTriggerProps, J as TableHeaderCell, H as TableHeaderCellProps, y as mapResponsiveValue, z as normalizeResponsiveValue, x as sprinkles, w as vars } from './Link-BULPyyH9.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
@@ -32,7 +32,7 @@ declare function extractBoxProps<S extends Record<string, unknown>>(props: S): {
 };
 
 declare const alert: (props?: {
-    intent?: "information" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "information" | "success" | "warning" | "danger" | "neutral" | "opal" | undefined;
 } | undefined, className?: string) => {
     className: string;
 };
@@ -45,7 +45,7 @@ type AlertProps = BoxProps<"div", AlertVariants & {
     onDismiss?: () => void;
 }>;
 declare const Alert: react.ForwardRefExoticComponent<{
-    intent?: "information" | "success" | "warning" | "danger" | "neutral" | undefined;
+    intent?: "information" | "success" | "warning" | "danger" | "neutral" | "opal" | undefined;
 } & {
     /**
      * Show a close button inside the alert and invoke this callback when the close button is clicked.
@@ -102,9 +102,9 @@ declare const AlertDialogAction: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -128,9 +128,9 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -184,9 +184,9 @@ declare const AlertDialogTrigger: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -204,9 +204,9 @@ declare const AngleMenuButton: react.ForwardRefExoticComponent<Omit<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -237,6 +237,7 @@ type AvatarProps = BoxProps<"span", AvatarVariants & {
     src?: string;
 }>;
 declare const mapFallbackToIcon: {
+    opal: null;
     team: react_jsx_runtime.JSX.Element;
     user: react_jsx_runtime.JSX.Element;
 };
@@ -297,9 +298,9 @@ declare const ToastAction: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -895,16 +896,6 @@ declare const ListboxEmpty: react.ForwardRefExoticComponent<Omit<NonNullable<Spr
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
-type ListboxFooterProps = ComponentPropsWithRef<typeof Flex>;
-declare const ListboxFooter: react.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<NonNullable<Sprinkles & {
-    asChild?: boolean;
-    className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
 type ListboxGroupProps = ComponentPropsWithoutRef<typeof Box>;
 declare const ListboxGroup: react.ForwardRefExoticComponent<Omit<Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
@@ -1068,9 +1059,9 @@ declare const DateRangePickerTrigger: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1125,9 +1116,9 @@ declare const DialogClose: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1173,7 +1164,7 @@ declare const DialogHeader: react.ForwardRefExoticComponent<{
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLHeadingElement>>;
+}>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 type DialogTriggerProps = ButtonProps<typeof RadixDialog.Trigger>;
 declare const DialogTrigger: react.ForwardRefExoticComponent<Omit<{
@@ -1185,9 +1176,9 @@ declare const DialogTrigger: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1384,9 +1375,9 @@ declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<Omit<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1404,9 +1395,9 @@ declare const EllipsisMenuButton: react.ForwardRefExoticComponent<Omit<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -1635,9 +1626,9 @@ declare const LabelMenuButton: react.ForwardRefExoticComponent<Omit<Omit<NonNull
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -2066,9 +2057,9 @@ declare const SegmentedControlItem: react.ForwardRefExoticComponent<Omit<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, never> & Omit<NonNullable<Sprinkles & {
@@ -2424,9 +2415,9 @@ declare const ToggleButton: react.ForwardRefExoticComponent<{
     intent?: "danger" | "neutral" | "primary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     square?: boolean | undefined;
-    variant?: "strong" | "outline" | "subtle" | undefined;
+    variant?: "strong" | "opal" | "outline" | "subtle" | undefined;
 }, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse";
+    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "inverse" | "primary-opal";
     disabled?: boolean;
     loading?: boolean;
 }>, "appearance"> & Omit<NonNullable<Sprinkles & {
@@ -2478,7 +2469,7 @@ declare const TransitionGlobalConfig: {
     skipAnimations: boolean;
 };
 
-declare function TransitionGroup({ children, onPresenceChange, open, presence: presenceProp, }: {
+declare function TransitionGroup({ children, onPresenceChange, open: openProp, presence: presenceProp, }: {
     children?: ReactNode;
     onPresenceChange?: (presence: boolean) => void;
     open?: boolean;
@@ -2488,5 +2479,5 @@ declare namespace TransitionGroup {
     var displayName: string;
 }
 
-export { Alert, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger, AngleMenuButton, Avatar, AvatarGroup, AxiomProvider, Badge, Banner, Box, BoxProps, Button, ButtonGroup, ButtonProps, Checkbox, Code, Cover, DataTable, DataTableAction, DataTableBody, DataTableCheckbox, DataTableFooter, DataTableLabel, DateInput, DateRangePicker, DateRangePickerContent, DateRangePickerTrigger, Dialog, DialogBody, DialogClose, DialogFooter, DialogForm, DialogHeader, DialogTrigger, Disclosure, DisclosureContent, DisclosureTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisMenuButton, Field, FieldLabel, Flex, Grid, Heading, Indicator, Input, InputAddon, InputControlProps, InputRoot, Kbd, LabelMenuButton, Listbox, ListboxCheckboxItem, ListboxEmpty, ListboxFooter, ListboxGroup, ListboxItem, ListboxItemIndicator, ListboxLabel, ListboxRadioItem, ListboxSeparator, ListboxSwitchItem, ModalLayer, ModalProvider, Nav, NavAccountItem, NavBody, NavFooter, NavGroup, NavGroupContent, NavGroupTrigger, NavHeader, NavItem, NavList, NavSeparator, Pagination, Paper, Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger, Progress, Radio, RadioGroup, SearchInput, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectTrigger, Separator, Sidebar, SidebarToggle, Skeleton, Spinner, Sprinkles, SubNav, Switch, Table, TableAction, TableBody, TableCell, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemeProvider, Toast, ToastAction, ToastProvider, ToastTitle, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, Transition, TransitionGlobalConfig, TransitionGroup, extractBoxProps, layers_css as layers, sprinklesMerge, useModalContext };
-export type { AlertDialogActionProps, AlertDialogBodyProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogProps, AlertDialogTriggerProps, AlertProps, AngleMenuButtonProps, AvatarGroupProps, AvatarProps, AxiomProviderProps, BadgeProps, BannerProps, ButtonGroupProps, CodeProps, CoverProps, DataTableActionProps, DataTableBodyProps, DataTableCheckboxProps, DataTableFooterProps, DataTableLabelProps, DataTableProps, DateInputProps, DateRangePickerContentProps, DateRangePickerProps, DateRangePickerTriggerProps, DialogBodyProps, DialogCloseProps, DialogFooterProps, DialogFormProps, DialogHeaderProps, DialogProps, DialogTriggerProps, DisclosureContentProps, DisclosureProps, DisclosureTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps, EllipsisMenuButtonProps, FieldLabelProps, FieldProps, GridProps, HeadingProps, IndicatorProps, InputAddonProps, KbdProps, LabelMenuButtonProps, ListboxCheckboxItemProps, ListboxEmptyProps, ListboxFooterProps, ListboxGroupProps, ListboxItemIndicatorProps, ListboxItemProps, ListboxLabelProps, ListboxProps, ListboxRadioItemProps, ListboxSeparatorProps, ListboxSwitchItemProps, ModalLayerProps, NavAccountItemProps, NavBodyProps, NavFooterProps, NavGroupContentProps, NavGroupProps, NavGroupTriggerProps, NavHeaderProps, NavItemProps, NavListProps, NavProps, NavSeparatorProps, PaginationProps, PaperProps, PopoverAnchorProps, PopoverProps, ProgressProps, RadioGroupProps, RadioProps, SearchInputProps, SegmentedControlItemProps, SegmentedControlProps, SelectContentProps, SelectProps, SelectTriggerProps, SeparatorProps, SidebarProps, SidebarToggleProps, SkeletonProps, SpinnerProps, SubNavProps, SwitchProps, TableActionProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TextProps, TextareaProps, ThemeProviderProps, ToastActionProps, ToastProps, ToastProviderProps$1 as ToastProviderProps, ToastTitleProps, ToggleButtonProps, TooltipContentProps, TooltipProps, TooltipProviderProps$1 as TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, TransitionProps };
+export { Alert, AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger, AngleMenuButton, Avatar, AvatarGroup, AxiomProvider, Badge, Banner, Box, BoxProps, Button, ButtonGroup, ButtonProps, Checkbox, Code, Cover, DataTable, DataTableAction, DataTableBody, DataTableCheckbox, DataTableFooter, DataTableLabel, DateInput, DateRangePicker, DateRangePickerContent, DateRangePickerTrigger, Dialog, DialogBody, DialogClose, DialogFooter, DialogForm, DialogHeader, DialogTrigger, Disclosure, DisclosureContent, DisclosureTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisMenuButton, Field, FieldLabel, Flex, Grid, Heading, Indicator, Input, InputAddon, InputControlProps, InputRoot, Kbd, LabelMenuButton, Listbox, ListboxCheckboxItem, ListboxEmpty, ListboxGroup, ListboxItem, ListboxItemIndicator, ListboxLabel, ListboxRadioItem, ListboxSeparator, ListboxSwitchItem, ModalLayer, ModalProvider, Nav, NavAccountItem, NavBody, NavFooter, NavGroup, NavGroupContent, NavGroupTrigger, NavHeader, NavItem, NavList, NavSeparator, Pagination, Paper, Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger, Progress, Radio, RadioGroup, SearchInput, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectTrigger, Separator, Sidebar, SidebarToggle, Skeleton, Spinner, Sprinkles, SubNav, Switch, Table, TableAction, TableBody, TableCell, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemeProvider, Toast, ToastAction, ToastProvider, ToastTitle, ToggleButton, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, Transition, TransitionGlobalConfig, TransitionGroup, extractBoxProps, layers_css as layers, sprinklesMerge, useModalContext };
+export type { AlertDialogActionProps, AlertDialogBodyProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogProps, AlertDialogTriggerProps, AlertProps, AngleMenuButtonProps, AvatarGroupProps, AvatarProps, AxiomProviderProps, BadgeProps, BannerProps, ButtonGroupProps, CodeProps, CoverProps, DataTableActionProps, DataTableBodyProps, DataTableCheckboxProps, DataTableFooterProps, DataTableLabelProps, DataTableProps, DateInputProps, DateRangePickerContentProps, DateRangePickerProps, DateRangePickerTriggerProps, DialogBodyProps, DialogCloseProps, DialogFooterProps, DialogFormProps, DialogHeaderProps, DialogProps, DialogTriggerProps, DisclosureContentProps, DisclosureProps, DisclosureTriggerProps, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps, EllipsisMenuButtonProps, FieldLabelProps, FieldProps, GridProps, HeadingProps, IndicatorProps, InputAddonProps, KbdProps, LabelMenuButtonProps, ListboxCheckboxItemProps, ListboxEmptyProps, ListboxGroupProps, ListboxItemIndicatorProps, ListboxItemProps, ListboxLabelProps, ListboxProps, ListboxRadioItemProps, ListboxSeparatorProps, ListboxSwitchItemProps, ModalLayerProps, NavAccountItemProps, NavBodyProps, NavFooterProps, NavGroupContentProps, NavGroupProps, NavGroupTriggerProps, NavHeaderProps, NavItemProps, NavListProps, NavProps, NavSeparatorProps, PaginationProps, PaperProps, PopoverAnchorProps, PopoverProps, ProgressProps, RadioGroupProps, RadioProps, SearchInputProps, SegmentedControlItemProps, SegmentedControlProps, SelectContentProps, SelectProps, SelectTriggerProps, SeparatorProps, SidebarProps, SidebarToggleProps, SkeletonProps, SpinnerProps, SubNavProps, SwitchProps, TableActionProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TextProps, TextareaProps, ThemeProviderProps, ToastActionProps, ToastProps, ToastProviderProps$1 as ToastProviderProps, ToastTitleProps, ToggleButtonProps, TooltipContentProps, TooltipProps, TooltipProviderProps$1 as TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, TransitionProps };