@parrot-co/parrot-ui 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/index.mjs

@@ -1,9 +1,11 @@
-import * as React36 from 'react';
-import React36__default from 'react';
-import { TextField, Input as Input$1, Button as Button$1, ToggleButton as ToggleButton$1, NumberField, Group, TextArea, CheckboxGroup as CheckboxGroup$1, CheckboxField, CheckboxButton, MenuTrigger as MenuTrigger$1, Pressable, Popover as Popover$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, ListBox as ListBox$1, ListBoxItem as ListBoxItem$1, composeRenderProps, ListBoxSection as ListBoxSection$1, useAsyncList, useFilter, ComboBox as ComboBox$1, RadioField, RadioButton, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Calendar as Calendar$1, RangeCalendar as RangeCalendar$1, DateField as DateField$1, TimeField as TimeField$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DropZone, FileTrigger, ProgressBar, SwitchField, SwitchButton, Slider as Slider$1, SliderTrack, SliderThumb, Tabs as Tabs$1, TabList, Tab as Tab$1, TabPanel, Table as Table$1, TableHeader, Column, TableBody, Row, Cell, ModalOverlay, Modal as Modal$1, Dialog, TagGroup as TagGroup$1, TagList, Tag as Tag$1, parseColor, ColorArea as ColorArea$1, ColorThumb, ColorField as ColorField$1, ColorSwatchPicker as ColorSwatchPicker$1, ColorSwatchPickerItem, ColorSwatch, ColorSlider as ColorSlider$1, ToggleButtonGroup, Collection, useContextProps, GroupContext, FieldError, LabelContext, CalendarMonthPicker, CalendarYearPicker, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DateInput, DateSegment, TextContext } from 'react-aria-components';
-import { twMerge } from 'tailwind-merge';
+import * as React13 from 'react';
+import React13__default from 'react';
+import { UNSTABLE_ToastQueue, TextField, Input as Input$1, Button as Button$1, ToggleButton as ToggleButton$1, NumberField, Group, FieldErrorContext, TextArea, CheckboxGroup as CheckboxGroup$1, CheckboxField, CheckboxButton, MenuTrigger as MenuTrigger$1, Pressable, Popover as Popover$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, ListBox as ListBox$1, ListBoxItem as ListBoxItem$1, composeRenderProps, ListBoxSection as ListBoxSection$1, useAsyncList, useFilter, ComboBox as ComboBox$1, RadioField, RadioButton, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Calendar as Calendar$1, RangeCalendar as RangeCalendar$1, DateField as DateField$1, TimeField as TimeField$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, DropZone, FileTrigger, ProgressBar, SwitchField, SwitchButton, Slider as Slider$1, SliderTrack, SliderThumb, Tabs as Tabs$1, TabList, Tab as Tab$1, TabPanel, Table as Table$1, TableBody, useTableOptions, TableHeader, Column, Collection, Row, Cell, ModalOverlay, Modal as Modal$1, Dialog, TagGroup as TagGroup$1, TagList, Tag as Tag$1, parseColor, ColorArea as ColorArea$1, ColorThumb, ColorField as ColorField$1, ColorSwatchPicker as ColorSwatchPicker$1, ColorSwatchPickerItem, ColorSwatch, ColorSlider as ColorSlider$1, ToggleButtonGroup, UNSTABLE_ToastRegion, TooltipTrigger, Tooltip as Tooltip$1, OverlayArrow, useContextProps, GroupContext, FieldError, LabelContext, CalendarMonthPicker, CalendarYearPicker, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DateInput, DateSegment, UNSTABLE_Toast, UNSTABLE_ToastContent, Text as Text$1, TextContext } from 'react-aria-components';
+import { OTPInput, REGEXP_ONLY_DIGITS_AND_CHARS, REGEXP_ONLY_DIGITS, OTPInputContext } from 'input-otp';
 import { parseDate, parseTime } from '@internationalized/date';
 import { useOverlayTriggerState } from 'react-stately';
+import { flushSync } from 'react-dom';
+import { useHover, useFocusWithin, mergeProps } from 'react-aria';
 
 // src/components/input/input.tsx
 
@@ -66,7 +68,7 @@ function cx(...args) {
   return classStr;
 }
 function cn(...args) {
-  return twMerge(cx(...args));
+  return cx(...args);
 }
 var validDOMProperties = /* @__PURE__ */ new Set([
   // Common HTML attributes
@@ -288,7 +290,7 @@ function InputLabel({
     LabelContext
   );
   const { elementType: ElementType = "label", ...labelProps } = merged;
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ElementType,
     {
       ...labelProps,
@@ -305,7 +307,7 @@ function InputError({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     FieldError,
     {
       ...props,
@@ -316,7 +318,7 @@ function InputError({
     children
   );
 }
-var SpaceContext = React36.createContext({ classNames: {}, compactItemWrapperAdjust: "" });
+var SpaceContext = React13.createContext({ classNames: {}, compactItemWrapperAdjust: "" });
 var GAP_CLASS = {
   none: "gap-0",
   "4xs": "gap-0.5",
@@ -341,13 +343,13 @@ function Space({
   style,
   styles
 }) {
-  const childrenCount = React36.Children.count(children);
-  const nodes = React36.useMemo(() => {
-    return React36.Children.map(children, (child, index) => {
+  const childrenCount = React13.Children.count(children);
+  const nodes = React13.useMemo(() => {
+    return React13.Children.map(children, (child, index) => {
       const isFirstChild = index == 0;
       const isLastChild = index == childrenCount - 1;
-      if (!React36.isValidElement(child)) return null;
-      return /* @__PURE__ */ React36.createElement(
+      if (!React13.isValidElement(child)) return null;
+      return /* @__PURE__ */ React13.createElement(
         SpaceContext.Provider,
         {
           value: {
@@ -363,7 +365,7 @@ function Space({
       );
     });
   }, [children]);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       "data-compact": compact,
@@ -380,15 +382,15 @@ function Space({
   );
 }
 function useSpace() {
-  return React36.useContext(SpaceContext);
+  return React13.useContext(SpaceContext);
 }
-var ThemeContext = React36.createContext(null);
+var ThemeContext = React13.createContext(null);
 function ThemeProvider(props) {
   const { children, className, ...themeProps } = props;
-  return /* @__PURE__ */ React36.createElement(ThemeContext.Provider, { value: themeProps }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(ThemeContext.Provider, { value: themeProps }, /* @__PURE__ */ React13.createElement(
     "div",
     {
-      "data-theme": themeProps.appearance,
+      "data-theme": themeProps.colorScheme,
       "data-radius": themeProps.radius,
       "data-color": themeProps.color,
       className: cn("parrot-theme", className)
@@ -397,7 +399,7 @@ function ThemeProvider(props) {
   ));
 }
 function useTheme(options) {
-  const theme = React36.useContext(ThemeContext);
+  const theme = React13.useContext(ThemeContext);
   if (!theme && options?.requireThemeProvider)
     throw new Error("No theme found");
   return theme;
@@ -410,14 +412,14 @@ function Field({
   error,
   color = "gray",
   radius,
-  size = "md",
+  size,
   className,
   classNames,
   style,
   styles,
   prepend,
   append,
-  appearance = "outline",
+  appearance,
   validationStatus,
   children,
   replaceDefaultControlWrapper,
@@ -427,16 +429,18 @@ function Field({
 }) {
   const space = useSpace();
   const theme = useTheme();
-  const controlRef = React36__default.useRef(null);
+  const resolvedSize = size ?? theme?.size ?? "md";
+  const resolvedAppearance = appearance ?? theme?.inputAppearance ?? "outline";
+  const controlRef = React13__default.useRef(null);
   const [, groupRef] = useContextProps({}, controlRef, GroupContext);
-  return /* @__PURE__ */ React36__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(
     "div",
     {
       ref: wrapperRef,
       ...filterDOMProps(props),
       "data-color": color,
       "data-radius": radius ?? theme?.radius ?? "lg",
-      "data-size": size,
+      "data-size": resolvedSize,
       className: cn(
         "prt-input-group flex flex-col gap-1",
         space.compactItemWrapperAdjust,
@@ -445,7 +449,7 @@ function Field({
       ),
       style: { ...style, ...styles?.wrapper }
     },
-    label && /* @__PURE__ */ React36__default.createElement(
+    label && /* @__PURE__ */ React13__default.createElement(
       InputLabel,
       {
         style: styles?.label,
@@ -454,7 +458,7 @@ function Field({
       },
       label
     ),
-    !replaceDefaultControlWrapper && /* @__PURE__ */ React36__default.createElement(
+    !replaceDefaultControlWrapper && /* @__PURE__ */ React13__default.createElement(
       "div",
       {
         ref: groupRef,
@@ -463,16 +467,16 @@ function Field({
           space.classNames
         ),
         "data-has-error": !!error,
-        "data-appearance": appearance,
+        "data-appearance": resolvedAppearance,
         "data-disabled": isDisabled
       },
-      prepend && /* @__PURE__ */ React36__default.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
+      prepend && /* @__PURE__ */ React13__default.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
       children,
-      append && /* @__PURE__ */ React36__default.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
+      append && /* @__PURE__ */ React13__default.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
     ),
     replaceDefaultControlWrapper && children,
-    error && /* @__PURE__ */ React36__default.createElement(InputError, { validationStatus }, error),
-    description && /* @__PURE__ */ React36__default.createElement(
+    error && /* @__PURE__ */ React13__default.createElement(InputError, { validationStatus }, error),
+    description && /* @__PURE__ */ React13__default.createElement(
       FieldDescription,
       {
         style: styles?.description,
@@ -493,7 +497,7 @@ function FieldDescription({
     null,
     TextContext
   );
-  return /* @__PURE__ */ React36__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(
     "div",
     {
       ...merged,
@@ -528,7 +532,7 @@ function Input({
   placeholder,
   ...textFieldProps
 }) {
-  return /* @__PURE__ */ React36.createElement(TextField, { ...textFieldProps, onChange, isInvalid: !!error }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(TextField, { ...textFieldProps, onChange, isInvalid: !!error }, /* @__PURE__ */ React13.createElement(
     Field,
     {
       className,
@@ -547,7 +551,7 @@ function Input({
       appearance,
       validationStatus
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Input$1,
       {
         ref: inputRef,
@@ -566,15 +570,16 @@ function Loader({
   classNames,
   style,
   styles,
-  size = "sm",
+  size,
   label = "Loading",
   ref,
   ...props
 }) {
   const theme = useTheme();
   const resolvedColor = color ?? theme?.color;
-  const id2 = React36.useId();
-  return /* @__PURE__ */ React36.createElement(
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  const id2 = React13.useId();
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       "data-color": resolvedColor,
@@ -585,16 +590,16 @@ function Loader({
       ref,
       ...props
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       "svg",
       {
         className: cn("prt-loader-icon", classNames?.icon),
         style: styles?.icon,
-        "data-size": size,
+        "data-size": resolvedSize,
         viewBox: "0 0 24 24",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React36.createElement("defs", null, /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement("defs", null, /* @__PURE__ */ React13.createElement(
         "linearGradient",
         {
           id: `${id2}-a`,
@@ -603,9 +608,9 @@ function Loader({
           y1: "5.271%",
           y2: "91.793%"
         },
-        /* @__PURE__ */ React36.createElement("stop", { offset: "0%", stopColor: "currentColor" }),
-        /* @__PURE__ */ React36.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.55" })
-      ), /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React13.createElement("stop", { offset: "0%", stopColor: "currentColor" }),
+        /* @__PURE__ */ React13.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.55" })
+      ), /* @__PURE__ */ React13.createElement(
         "linearGradient",
         {
           id: `${id2}-b`,
@@ -614,17 +619,17 @@ function Loader({
           y1: "15.24%",
           y2: "87.15%"
         },
-        /* @__PURE__ */ React36.createElement("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0" }),
-        /* @__PURE__ */ React36.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.55" })
+        /* @__PURE__ */ React13.createElement("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0" }),
+        /* @__PURE__ */ React13.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.55" })
       )),
-      /* @__PURE__ */ React36.createElement("g", { fill: "none" }, /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement("g", { fill: "none" }, /* @__PURE__ */ React13.createElement(
         "path",
         {
           d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
           fill: `url(#${id2}-a)`,
           transform: "translate(1.5 1.625)"
         }
-      ), /* @__PURE__ */ React36.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         "path",
         {
           d: "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118",
@@ -650,7 +655,7 @@ function omitNullOrUndefined(object) {
 }
 
 // src/components/button/button-group.tsx
-var ButtonGroupContext = React36.createContext({});
+var ButtonGroupContext = React13.createContext({});
 function ButtonGroup({
   color,
   variant,
@@ -670,7 +675,7 @@ function ButtonGroup({
     size,
     radius
   });
-  return /* @__PURE__ */ React36.createElement(ButtonGroupContext.Provider, { value: cleanProps }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(ButtonGroupContext.Provider, { value: cleanProps }, /* @__PURE__ */ React13.createElement(
     Space,
     {
       className,
@@ -684,7 +689,7 @@ function ButtonGroup({
   ));
 }
 function useButtonGroup() {
-  return React36.useContext(ButtonGroupContext);
+  return React13.useContext(ButtonGroupContext);
 }
 
 // src/components/button/button.tsx
@@ -697,23 +702,24 @@ function Button(props) {
     variant = "solid",
     append,
     prepend,
-    size = "md",
+    size,
     children,
     className,
     isLoading,
-    radius = "full",
+    radius,
     isIconButton,
     style,
     classNames,
     styles,
     ...otherProps
   } = { ...buttonGroupProps, ...props };
-  return /* @__PURE__ */ React36.createElement(
+  const resolvedSize = size ?? theme?.size ?? "md";
+  return /* @__PURE__ */ React13.createElement(
     Button$1,
     {
       style: { ...style, ...styles?.wrapper },
-      "data-size": size,
-      "data-radius": radius,
+      "data-size": resolvedSize,
+      "data-radius": radius ?? theme?.radius ?? "full",
       "data-icon-button": isIconButton,
       "data-loading": isLoading,
       "aria-busy": isLoading,
@@ -729,7 +735,7 @@ function Button(props) {
     },
     prepend,
     isIconButton && isLoading ? null : children,
-    isLoading ? /* @__PURE__ */ React36.createElement(
+    isLoading ? /* @__PURE__ */ React13.createElement(
       Loader,
       {
         color,
@@ -741,9 +747,9 @@ function Button(props) {
   );
 }
 function IconButton({ children, ...props }) {
-  return /* @__PURE__ */ React36__default.createElement(Button, { isIconButton: true, ...props }, children);
+  return /* @__PURE__ */ React13__default.createElement(Button, { isIconButton: true, ...props }, children);
 }
-var ToggleButtonGroupContext = React36.createContext({});
+var ToggleButtonGroupContext = React13.createContext({});
 function ToggleButton({
   idleColor,
   idleVariant,
@@ -763,15 +769,15 @@ function ToggleButton({
 }) {
   const space = useSpace();
   const theme = useTheme();
-  const group = React36.useContext(ToggleButtonGroupContext);
+  const group = React13.useContext(ToggleButtonGroupContext);
   const _idleColor = idleColor ?? group.idleColor ?? "gray";
   const _idleVariant = idleVariant ?? group.idleVariant ?? "outline";
   const _activeColor = activeColor ?? group.activeColor ?? theme?.color ?? "primary";
   const _activeVariant = activeVariant ?? group.activeVariant ?? "solid";
-  const _size = size ?? group.size ?? "md";
+  const _size = size ?? group.size ?? theme?.size ?? "md";
   const _radius = radius ?? group.radius ?? "full";
   const _isIconButton = isIconButton ?? group.isIconButton;
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ToggleButton$1,
     {
       ...props,
@@ -782,7 +788,7 @@ function ToggleButton({
         classNames?.wrapper
       ),
       style: { ...style, ...styles?.wrapper },
-      render: (domProps, { isSelected }) => /* @__PURE__ */ React36.createElement(
+      render: (domProps, { isSelected }) => /* @__PURE__ */ React13.createElement(
         "button",
         {
           ...domProps,
@@ -804,7 +810,7 @@ function ToggleButton({
 // src/components/input/number-input.tsx
 function NumberInput({
   appearance = "outline",
-  size = "md",
+  size,
   color = "gray",
   classNames,
   styles,
@@ -825,19 +831,21 @@ function NumberInput({
   ...props
 }) {
   const space = useSpace();
-  return /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "md";
+  return /* @__PURE__ */ React13.createElement(
     NumberField,
     {
       ...props,
       isInvalid: !!error,
       "aria-label": props["aria-label"] ?? "number input"
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         classNames,
         color,
-        size,
+        size: resolvedSize,
         radius,
         error,
         label,
@@ -845,19 +853,19 @@ function NumberInput({
         validationStatus,
         replaceDefaultControlWrapper: true
       },
-      /* @__PURE__ */ React36.createElement(Group, { className: "prt-input-container", style: { display: "flex", gap: 4 } }, showSteppers && /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(Group, { className: "prt-input-container", style: { display: "flex", gap: 4 } }, showSteppers && /* @__PURE__ */ React13.createElement(
         IconButton,
         {
           slot: "decrement",
           radius: "md",
           color,
           variant: "outline",
-          size,
+          size: resolvedSize,
           className: classNames?.decrement,
           style: styles?.decrement
         },
         decrementIcon
-      ), /* @__PURE__ */ React36.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         Input$1,
         {
           style: styles?.input,
@@ -873,14 +881,14 @@ function NumberInput({
           "data-has-left-addon": !!prepend,
           "data-has-right-addon": !!append
         }
-      ), showSteppers && /* @__PURE__ */ React36.createElement(
+      ), showSteppers && /* @__PURE__ */ React13.createElement(
         IconButton,
         {
           slot: "increment",
           radius: "md",
           color,
           variant: "outline",
-          size,
+          size: resolvedSize,
           className: classNames?.increment,
           style: styles?.increment
         },
@@ -890,46 +898,219 @@ function NumberInput({
   );
 }
 function HiCheck({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }));
 }
 function HiChevronDown({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }));
 }
 function HiChevronLeft({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }));
 }
 function HiChevronRight({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }));
 }
 function HiChevronUp({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z", clipRule: "evenodd" }));
 }
 function HiOutlineCalendar({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }));
 }
 function HiOutlineCheckCircle({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }));
 }
 function HiOutlineDocumentAdd({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }));
 }
 function HiOutlineExclamationCircle({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }));
+}
+function HiOutlineInformationCircle({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }));
 }
 function HiOutlinePaperClip({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }));
 }
 function HiOutlineRefresh({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }));
 }
 function HiOutlineTrash({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }));
+  return /* @__PURE__ */ React13.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }));
 }
 function HiSelector({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", clipRule: "evenodd" }));
 }
 function HiX({ size = "1em", ...props }) {
-  return /* @__PURE__ */ React36.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React36.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }));
+  return /* @__PURE__ */ React13.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }));
+}
+var PATTERNS = {
+  numeric: REGEXP_ONLY_DIGITS,
+  alphanumeric: REGEXP_ONLY_DIGITS_AND_CHARS,
+  all: void 0
+};
+var INPUT_MODE = {
+  numeric: "numeric",
+  alphanumeric: "text",
+  all: "text"
+};
+var PinInputConfigContext = React13.createContext(null);
+function usePinInputConfig() {
+  const ctx = React13.useContext(PinInputConfigContext);
+  if (!ctx) {
+    throw new Error(
+      "PinInput compound components must be rendered inside <PinInput>"
+    );
+  }
+  return ctx;
+}
+function PinInput({
+  value,
+  defaultValue,
+  onChange,
+  onComplete,
+  length,
+  maxLength: maxLength2,
+  type = "numeric",
+  pattern: pattern2,
+  mask = false,
+  placeholder,
+  isReadOnly = false,
+  autoFocus,
+  name,
+  groupSize,
+  separator,
+  children,
+  inputRef: inputRefProp,
+  classNames,
+  styles,
+  ...fieldProps
+}) {
+  const resolvedMax = maxLength2 ?? length ?? 6;
+  const isDisabled = fieldProps.isDisabled ?? false;
+  const isInvalid = !!fieldProps.error;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React13.useState(defaultValue ?? "");
+  const currentValue = isControlled ? value : internalValue;
+  function handleChange(next) {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  }
+  const config = React13.useMemo(
+    () => ({ mask, placeholder, isDisabled, isInvalid }),
+    [mask, placeholder, isDisabled, isInvalid]
+  );
+  const fieldError = React13.useMemo(
+    () => ({
+      isInvalid,
+      validationErrors: [],
+      validationDetails: {}
+    }),
+    [isInvalid]
+  );
+  const content = children ?? renderSlots(resolvedMax, groupSize, separator, classNames?.slot);
+  return /* @__PURE__ */ React13.createElement(PinInputConfigContext.Provider, { value: config }, /* @__PURE__ */ React13.createElement(FieldErrorContext.Provider, { value: fieldError }, /* @__PURE__ */ React13.createElement(
+    Field,
+    {
+      ...fieldProps,
+      classNames,
+      styles,
+      replaceDefaultControlWrapper: true
+    },
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        className: cn("prt-pin", classNames?.control),
+        style: styles?.control,
+        "data-disabled": isDisabled || void 0,
+        "data-invalid": isInvalid || void 0
+      },
+      /* @__PURE__ */ React13.createElement(
+        OTPInput,
+        {
+          ref: inputRefProp,
+          value: currentValue,
+          onChange: handleChange,
+          onComplete,
+          maxLength: resolvedMax,
+          pattern: pattern2?.source ?? PATTERNS[type],
+          inputMode: INPUT_MODE[type],
+          textAlign: "center",
+          autoComplete: "one-time-code",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: false,
+          autoFocus,
+          disabled: isDisabled,
+          readOnly: isReadOnly,
+          name,
+          "aria-invalid": isInvalid || void 0,
+          containerClassName: "prt-pin-otp",
+          className: cn("prt-pin-input", classNames?.input),
+          style: styles?.input
+        },
+        content
+      )
+    )
+  )));
+}
+function renderSlots(maxLength2, groupSize, separator, slotClassName) {
+  const size = groupSize && groupSize > 0 ? groupSize : maxLength2;
+  const groups = [];
+  for (let i = 0; i < maxLength2; i += size) {
+    groups.push(
+      Array.from({ length: Math.min(size, maxLength2 - i) }, (_, j) => i + j)
+    );
+  }
+  return groups.map((indices, groupIndex) => /* @__PURE__ */ React13.createElement(React13.Fragment, { key: groupIndex }, groupIndex > 0 && /* @__PURE__ */ React13.createElement(PinInputSeparator, null, separator), /* @__PURE__ */ React13.createElement(PinInputGroup, null, indices.map((index) => /* @__PURE__ */ React13.createElement(PinInputSlot, { key: index, index, className: slotClassName })))));
+}
+function PinInputGroup({ className, ...props }) {
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      className: cn("prt-pin-group", className),
+      "data-slot": "group",
+      ...props
+    }
+  );
+}
+function PinInputSlot({
+  index,
+  className,
+  ...props
+}) {
+  const { mask, placeholder, isDisabled, isInvalid } = usePinInputConfig();
+  const { slots } = React13.useContext(OTPInputContext);
+  const slot = slots[index];
+  const char = slot?.char ?? null;
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      ...props,
+      className: cn("prt-pin-slot", className),
+      "data-slot": "slot",
+      "data-active": slot?.isActive || void 0,
+      "data-filled": !!char || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0
+    },
+    char !== null ? /* @__PURE__ */ React13.createElement("span", { className: "prt-pin-char" }, mask ? "\u2022" : char) : placeholder ? /* @__PURE__ */ React13.createElement("span", { className: "prt-pin-placeholder" }, placeholder) : null,
+    slot?.hasFakeCaret && /* @__PURE__ */ React13.createElement("div", { className: "prt-pin-caret", "aria-hidden": true })
+  );
+}
+function PinInputSeparator({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      className: cn("prt-pin-separator", className),
+      "data-slot": "separator",
+      "aria-hidden": true,
+      ...props
+    },
+    children ?? "-"
+  );
 }
 
 // src/utils/theme.ts
@@ -1005,7 +1186,7 @@ function breakpointClassNames(prefix, value) {
 // src/components/text/text.tsx
 function Text({
   textCase,
-  size = "sm",
+  size,
   weight,
   color = "gray",
   variant = "default",
@@ -1018,7 +1199,9 @@ function Text({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  return /* @__PURE__ */ React13.createElement(
     Comp,
     {
       className: cn(
@@ -1031,7 +1214,7 @@ function Text({
           [`text-line-height-${lineHeight}`]: !!lineHeight,
           [`text-transform-${textCase}`]: !!textCase
         },
-        breakpointClassNames("text-size", size)
+        breakpointClassNames("text-size", resolvedSize)
       ),
       "data-underline": underline,
       "data-italic": italic,
@@ -1066,7 +1249,7 @@ function Textarea({
   ...textFieldProps
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(TextField, { ...textFieldProps, isDisabled, isInvalid: !!error }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(TextField, { ...textFieldProps, isDisabled, isInvalid: !!error }, /* @__PURE__ */ React13.createElement(
     Field,
     {
       label,
@@ -1081,7 +1264,7 @@ function Textarea({
       classNames,
       replaceDefaultControlWrapper: true
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       TextArea,
       {
         placeholder,
@@ -1096,7 +1279,7 @@ function Textarea({
     )
   ));
 }
-var CheckboxGroupVariantContext = React36.createContext(null);
+var CheckboxGroupVariantContext = React13.createContext(null);
 function CheckboxGroup({
   children,
   label,
@@ -1109,17 +1292,17 @@ function CheckboxGroup({
   shape,
   ...props
 }) {
-  const variants = React36.useMemo(
+  const variants = React13.useMemo(
     () => ({ size, appearance, color, radius, shape }),
     [size, appearance, color, radius, shape]
   );
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     CheckboxGroup$1,
     {
       ...props,
       "aria-label": typeof label === "string" ? label : void 0
     },
-    /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-2" }, label && /* @__PURE__ */ React36.createElement("span", { className: "text-sm font-medium text-gray-700" }, label), /* @__PURE__ */ React36.createElement(CheckboxGroupVariantContext.Provider, { value: variants }, children), description && /* @__PURE__ */ React36.createElement("span", { className: "text-xs leading-normal text-gray-400" }, description), errorMessage && /* @__PURE__ */ React36.createElement(InputError, null, errorMessage))
+    /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-2" }, label && /* @__PURE__ */ React13.createElement("span", { className: "text-sm font-medium text-gray-700" }, label), /* @__PURE__ */ React13.createElement(CheckboxGroupVariantContext.Provider, { value: variants }, children), description && /* @__PURE__ */ React13.createElement("span", { className: "text-xs leading-normal text-gray-400" }, description), errorMessage && /* @__PURE__ */ React13.createElement(InputError, null, errorMessage))
   );
 }
 
@@ -1142,18 +1325,19 @@ function Checkbox({
   children,
   ...props
 }) {
-  const group = React36.useContext(CheckboxGroupVariantContext);
+  const theme = useTheme();
+  const group = React13.useContext(CheckboxGroupVariantContext);
   const resolvedColor = color ?? group?.color ?? "primary";
-  const resolvedAppearance = appearance ?? group?.appearance ?? "outline";
-  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedAppearance = appearance ?? group?.appearance ?? theme?.inputAppearance ?? "outline";
+  const resolvedSize = size ?? group?.size ?? theme?.size ?? "md";
   const resolvedRadius = radius ?? group?.radius ?? getRadius(shape ?? group?.shape) ?? "md";
-  return /* @__PURE__ */ React36.createElement(CheckboxField, { ...props }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(CheckboxField, { ...props }, /* @__PURE__ */ React13.createElement(
     CheckboxButton,
     {
       style: { ...style, ...styles?.wrapper },
       className: cn(className, "prt-checkbox", classNames?.wrapper)
     },
-    ({ isSelected, isIndeterminate, isFocusVisible }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+    ({ isSelected, isIndeterminate, isFocusVisible }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
       "div",
       {
         style: styles?.checkbox,
@@ -1168,7 +1352,7 @@ function Checkbox({
         "data-appearance": isSelected || isIndeterminate ? void 0 : resolvedAppearance,
         "aria-hidden": "true"
       },
-      isSelected && !isIndeterminate && /* @__PURE__ */ React36.createElement(
+      isSelected && !isIndeterminate && /* @__PURE__ */ React13.createElement(
         "svg",
         {
           className: cn("prt-checkbox-icon", classNames?.icon),
@@ -1180,9 +1364,9 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React36.createElement("path", { d: "M9 12l2 2l4 -4" })
+        /* @__PURE__ */ React13.createElement("path", { d: "M9 12l2 2l4 -4" })
       ),
-      isIndeterminate && /* @__PURE__ */ React36.createElement(
+      isIndeterminate && /* @__PURE__ */ React13.createElement(
         "div",
         {
           className: cn(["prt-checkbox-icon", classNames?.icon]),
@@ -1205,7 +1389,7 @@ function CheckboxItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(CheckboxField, { ...props }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(CheckboxField, { ...props }, /* @__PURE__ */ React13.createElement(
     CheckboxButton,
     {
       style: { ...style, ...styles?.wrapper },
@@ -1215,13 +1399,13 @@ function CheckboxItem({
   ));
 }
 function Menu({ children, ...props }) {
-  return /* @__PURE__ */ React36.createElement(MenuTrigger$1, { ...props }, children);
+  return /* @__PURE__ */ React13.createElement(MenuTrigger$1, { ...props }, children);
 }
 function MenuTrigger({ asChild, children }) {
   if (asChild) {
-    return /* @__PURE__ */ React36.createElement(Pressable, null, children);
+    return /* @__PURE__ */ React13.createElement(Pressable, null, children);
   }
-  return /* @__PURE__ */ React36.createElement(Button, null, children);
+  return /* @__PURE__ */ React13.createElement(Button, null, children);
 }
 function px(value) {
   if (value == null) return void 0;
@@ -1248,7 +1432,7 @@ function MenuContent({
   const dataRadius = theme?.radius ?? "lg";
   const header = typeof menuHeader === "function" ? menuHeader() : menuHeader;
   const footer = typeof menuFooter === "function" ? menuFooter() : menuFooter;
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Popover$1,
     {
       placement,
@@ -1258,7 +1442,7 @@ function MenuContent({
       className: cn("prt-popover", classNames?.popover),
       style: { ...styles?.popover }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         "data-color": dataColor,
@@ -1273,7 +1457,7 @@ function MenuContent({
         }
       },
       header,
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Menu$1,
         {
           ...props,
@@ -1299,7 +1483,7 @@ function MenuItem({
   ...props
 }) {
   const resolvedTextValue = textValue ?? (typeof label === "string" ? label : void 0) ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     MenuItem$1,
     {
       ...props,
@@ -1309,18 +1493,18 @@ function MenuItem({
       style,
       className: cn(className, "prt-list-option prt-menu-item")
     },
-    ({ isSelected }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-3" }, icon && /* @__PURE__ */ React36.createElement("div", { className: "flex gap-3 prt-list-option-icon-wrapper" }, React36.isValidElement(icon) && React36.cloneElement(icon, {
+    ({ isSelected }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-3" }, icon && /* @__PURE__ */ React13.createElement("div", { className: "flex gap-3 prt-list-option-icon-wrapper" }, React13.isValidElement(icon) && React13.cloneElement(icon, {
       className: "prt-list-option-icon",
       size: 18,
       ...icon.props
-    })), /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React36.createElement("div", { slot: "label", className: "text-sm text-black" }, label ?? children), description && /* @__PURE__ */ React36.createElement(
+    })), /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React13.createElement("div", { slot: "label", className: "text-sm text-black" }, label ?? children), description && /* @__PURE__ */ React13.createElement(
       "div",
       {
         slot: "description",
         className: "text-sm leading-normal text-gray-500"
       },
       description
-    ))), isSelected && /* @__PURE__ */ React36.createElement(HiCheck, { className: "selected-marker" }))
+    ))), isSelected && /* @__PURE__ */ React13.createElement(HiCheck, { className: "selected-marker" }))
   );
 }
 function MenuSection({
@@ -1329,9 +1513,9 @@ function MenuSection({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(MenuSection$1, { ...props, className: cn(className, "prt-list-section") }, title && /* @__PURE__ */ React36.createElement(Header, { className: "prt-list-section-header" }, title), children);
+  return /* @__PURE__ */ React13.createElement(MenuSection$1, { ...props, className: cn(className, "prt-list-section") }, title && /* @__PURE__ */ React13.createElement(Header, { className: "prt-list-section-header" }, title), children);
 }
-var ListBoxConfigContext = React36.createContext({
+var ListBoxConfigContext = React13.createContext({
   showSelectionIndicator: true
 });
 function ListBox({
@@ -1356,7 +1540,7 @@ function ListBox({
   ...props
 }) {
   const theme = useTheme();
-  const config = React36.useMemo(
+  const config = React13.useMemo(
     () => ({
       showSelectionIndicator,
       renderSelectionIndicator
@@ -1368,15 +1552,15 @@ function ListBox({
     const id2 = record[valueKey];
     const label = record[labelKey];
     if (sectionKey && record[sectionKey]) {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React13.createElement(
         ListBoxSection,
         {
           id: id2,
           title: renderSectionLabel?.(item) ?? label
         },
-        /* @__PURE__ */ React36.createElement(Collection, { items: record[sectionKey] }, (child) => {
+        /* @__PURE__ */ React13.createElement(Collection, { items: record[sectionKey] }, (child) => {
           const childRecord = child;
-          return /* @__PURE__ */ React36.createElement(
+          return /* @__PURE__ */ React13.createElement(
             ListBoxItem,
             {
               id: childRecord[valueKey],
@@ -1387,10 +1571,10 @@ function ListBox({
         })
       );
     }
-    return /* @__PURE__ */ React36.createElement(ListBoxItem, { id: id2, textValue: label }, renderOption?.(item) ?? label);
+    return /* @__PURE__ */ React13.createElement(ListBoxItem, { id: id2, textValue: label }, renderOption?.(item) ?? label);
   }
   const listBoxChildren = children ?? renderItem;
-  return /* @__PURE__ */ React36.createElement(ListBoxConfigContext.Provider, { value: config }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(ListBoxConfigContext.Provider, { value: config }, /* @__PURE__ */ React13.createElement(
     ListBox$1,
     {
       ...props,
@@ -1401,13 +1585,13 @@ function ListBox({
       "data-color": color,
       "data-section-separator": showSectionSeparator,
       style: { width, ...style, ...styles?.wrapper },
-      renderEmptyState: () => /* @__PURE__ */ React36.createElement(
+      renderEmptyState: () => /* @__PURE__ */ React13.createElement(
         "div",
         {
           className: "flex items-center justify-center gap-3",
           style: { height: 50 }
         },
-        renderEmpty?.() ?? /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-gray-400" }, "No options")
+        renderEmpty?.() ?? /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-gray-400" }, "No options")
       )
     },
     listBoxChildren
@@ -1422,10 +1606,10 @@ function ListBoxItem({
   textValue,
   ...props
 }) {
-  const config = React36.useContext(ListBoxConfigContext);
+  const config = React13.useContext(ListBoxConfigContext);
   const showIndicator = showSelectionIndicator ?? config.showSelectionIndicator;
   const resolvedTextValue = textValue ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ListBoxItem$1,
     {
       ...props,
@@ -1436,9 +1620,9 @@ function ListBoxItem({
     },
     composeRenderProps(
       children,
-      (rendered, renderProps) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, rendered, renderProps.isSelected && showIndicator && /* @__PURE__ */ React36.createElement("span", { className: "selection-indicator" }, config.renderSelectionIndicator?.(
+      (rendered, renderProps) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, rendered, renderProps.isSelected && showIndicator && /* @__PURE__ */ React13.createElement("span", { className: "selection-indicator" }, config.renderSelectionIndicator?.(
         props.value ?? props
-      ) ?? /* @__PURE__ */ React36.createElement(HiCheck, { size: 16 })))
+      ) ?? /* @__PURE__ */ React13.createElement(HiCheck, { size: 16 })))
     )
   );
 }
@@ -1448,7 +1632,7 @@ function ListBoxSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(ListBoxSection$1, { ...props, className: cn("prt-list-section", className) }, title && /* @__PURE__ */ React36.createElement(Header, { className: "prt-list-section-header" }, title), children);
+  return /* @__PURE__ */ React13.createElement(ListBoxSection$1, { ...props, className: cn("prt-list-section", className) }, title && /* @__PURE__ */ React13.createElement(Header, { className: "prt-list-section-header" }, title), children);
 }
 
 // src/components/combo-box/combo-box.tsx
@@ -1456,7 +1640,7 @@ function ComboBox({
   description,
   error,
   label,
-  selectorIcon = /* @__PURE__ */ React36.createElement(HiSelector, { size: 18 }),
+  selectorIcon = /* @__PURE__ */ React13.createElement(HiSelector, { size: 18 }),
   selectorSize = "sm",
   style,
   styles,
@@ -1464,7 +1648,7 @@ function ComboBox({
   classNames,
   isLoading,
   loadData,
-  loadingIndicator = /* @__PURE__ */ React36.createElement(Loader, { size: "xs" }),
+  loadingIndicator = /* @__PURE__ */ React13.createElement(Loader, { size: "xs" }),
   items,
   defaultItems,
   inputValue,
@@ -1510,13 +1694,13 @@ function ComboBox({
     isInvalid: !!error,
     defaultFilter: contains
   };
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ComboBox$1,
     {
       ...comboBoxProps,
       className: cn("prt-combo-box", className, classNames?.wrapper)
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         styles,
@@ -1532,7 +1716,7 @@ function ComboBox({
         prepend,
         append
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Input$1,
         {
           placeholder,
@@ -1544,7 +1728,7 @@ function ComboBox({
           )
         }
       ),
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         IconButton,
         {
           className: cn("prt-combo-box-button", classNames?.button),
@@ -1556,7 +1740,7 @@ function ComboBox({
         loading ? loadingIndicator : selectorIcon
       )
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Popover$1,
       {
         offset: 6,
@@ -1567,7 +1751,7 @@ function ComboBox({
         ),
         style: styles?.popover
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         ListBox,
         {
           items: comboItems,
@@ -1584,7 +1768,7 @@ function ComboBox({
   );
 }
 function Radio({
-  size = "sm",
+  size,
   className,
   style,
   appearance,
@@ -1592,14 +1776,18 @@ function Radio({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(RadioField, { ...props }, /* @__PURE__ */ React36.createElement(RadioButton, { style, className: cn("prt-radio", className) }, ({ isSelected }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  const resolvedAppearance = appearance ?? theme?.inputAppearance;
+  return /* @__PURE__ */ React13.createElement(RadioField, { ...props }, /* @__PURE__ */ React13.createElement(RadioButton, { style, className: cn("prt-radio", className) }, ({ isSelected }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
     "div",
     {
       "data-color": color,
+      "data-variant": isSelected ? "solid" : void 0,
       className: "prt-fake-radio",
-      "data-appearance": appearance,
+      "data-appearance": resolvedAppearance,
       "data-checked": isSelected,
-      "data-size": size
+      "data-size": resolvedSize
     }
   ), children)));
 }
@@ -1615,13 +1803,13 @@ function RadioGroup({
   ...props
 }) {
   const isHorizontal = props.orientation === "horizontal";
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     RadioGroup$1,
     {
       ...props,
       "aria-label": typeof label === "string" ? label : void 0
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         style: { ...style, ...styles?.wrapper },
@@ -1631,10 +1819,10 @@ function RadioGroup({
           classNames?.wrapper
         )
       },
-      label && /* @__PURE__ */ React36.createElement(InputLabel, null, label),
-      description && /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-gray-600" }, description),
-      /* @__PURE__ */ React36.createElement("div", { className: cn("flex gap-2", isHorizontal ? "flex-row" : "flex-col") }, children),
-      errorMessage && /* @__PURE__ */ React36.createElement(InputError, null, errorMessage)
+      label && /* @__PURE__ */ React13.createElement(InputLabel, null, label),
+      description && /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-gray-600" }, description),
+      /* @__PURE__ */ React13.createElement("div", { className: cn("flex gap-2", isHorizontal ? "flex-row" : "flex-col") }, children),
+      errorMessage && /* @__PURE__ */ React13.createElement(InputError, null, errorMessage)
     )
   );
 }
@@ -1651,23 +1839,25 @@ function RadioCard({
   styles,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(RadioField, { ...props }, /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedAppearance = appearance ?? theme?.inputAppearance;
+  return /* @__PURE__ */ React13.createElement(RadioField, { ...props }, /* @__PURE__ */ React13.createElement(
     RadioButton,
     {
       "data-radius": "lg",
       className: cn(className, "prt-radio-card", classNames?.wrapper),
       "data-color": color,
-      "data-appearance": appearance,
+      "data-appearance": resolvedAppearance,
       style: { ...style, ...styles?.wrapper }
     },
-    ({ isSelected }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, showIndicator && /* @__PURE__ */ React36.createElement(
+    ({ isSelected }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, showIndicator && /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: "prt-radio-card-indicator prt-fake-radio",
         "data-size": "sm",
         "data-checked": isSelected
       }
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: cn(
@@ -1676,14 +1866,14 @@ function RadioCard({
         ),
         style: { ...styles?.content }
       },
-      (title || description) && /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-0.5" }, title && /* @__PURE__ */ React36.createElement(
+      (title || description) && /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-0.5" }, title && /* @__PURE__ */ React13.createElement(
         "div",
         {
           className: cn("text-sm", classNames?.title),
           style: { ...styles?.title }
         },
         title
-      ), description && /* @__PURE__ */ React36.createElement(
+      ), description && /* @__PURE__ */ React13.createElement(
         "div",
         {
           className: cn(
@@ -1706,7 +1896,7 @@ function RadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(RadioField, { ...props }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(RadioField, { ...props }, /* @__PURE__ */ React13.createElement(
     RadioButton,
     {
       style: { ...style, ...styles?.wrapper },
@@ -1721,7 +1911,7 @@ function Tag({
   children,
   hashValue,
   color,
-  size = "sm",
+  size,
   shape,
   variant = "light",
   className,
@@ -1733,19 +1923,21 @@ function Tag({
   ...props
 }) {
   warnDeprecation("shape", "radius", shape);
-  const randomColor = React36__default.useMemo(() => {
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  const randomColor = React13__default.useMemo(() => {
     if (hashValue) {
       return getRandomColor(hashValue);
     }
     return "gray";
   }, [hashValue]);
-  return /* @__PURE__ */ React36__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(
     "span",
     {
       className: cn(className, "prt-tag", classNames?.wrapper),
       style: { ...style, ...styles?.wrapper },
       "data-radius": radius,
-      "data-size": size,
+      "data-size": resolvedSize,
       "data-color": color ?? randomColor,
       "data-variant": variant,
       ref,
@@ -1763,21 +1955,12 @@ function Select({
   description,
   error,
   placeholder,
-  selectionMode = "single",
-  appearance = "outline",
+  appearance,
   renderValue,
   color = "gray",
-  size = "sm",
+  size,
   radius,
   listBoxColor,
-  name,
-  value,
-  defaultValue,
-  isDisabled,
-  isRequired,
-  disabledKeys,
-  onChange,
-  onSelectionChange,
   showSectionSeparator = true,
   showSelectionIndicator = true,
   items,
@@ -1787,65 +1970,61 @@ function Select({
   sectionKey,
   renderOption,
   renderSectionLabel,
+  disabledKeys,
   className,
   classNames,
   style,
-  styles
+  styles,
+  "aria-label": ariaLabel,
+  ...racProps
 }) {
   const theme = useTheme();
-  const isMultiple = selectionMode === "multiple";
-  color = color ?? theme?.color;
-  function handleChange(v) {
-    onChange?.({ target: { value: v, name } });
-    onSelectionChange?.(v == null ? [] : Array.isArray(v) ? v : [v]);
-  }
+  const resolvedColor = color ?? theme?.color;
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  const resolvedAppearance = appearance ?? theme?.inputAppearance ?? "outline";
+  const isMultiple = racProps.selectionMode === "multiple";
   function labelOf(item) {
     if (item == null) return null;
     return item[labelKey];
   }
-  const racSelectProps = {
-    selectionMode,
-    isDisabled,
-    isRequired,
-    placeholder,
-    disabledKeys,
-    value,
-    defaultValue,
-    isInvalid: !!error,
-    onChange: handleChange
-  };
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Select$1,
     {
-      ...racSelectProps,
-      "aria-label": label == null ? placeholder ?? "Select" : void 0,
+      ...racProps,
+      placeholder,
+      isInvalid: !!error,
+      "aria-label": ariaLabel ?? (label == null ? placeholder ?? "Select" : void 0),
       className: cn("prt-select", className, classNames?.wrapper),
       style: { ...style, ...styles?.wrapper }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         replaceDefaultControlWrapper: true,
         label,
         error,
         description,
-        color,
-        size,
+        color: resolvedColor,
+        size: resolvedSize,
         radius,
         classNames,
         styles
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Button$1,
         {
-          "data-selection-mode": selectionMode,
-          "data-appearance": appearance,
+          "data-selection-mode": racProps.selectionMode ?? "single",
+          "data-appearance": resolvedAppearance,
           style: styles?.trigger,
-          className: cn("prt-input-control", "prt-select-trigger", classNames?.trigger)
+          className: cn(
+            "prt-input-control",
+            "prt-select-trigger",
+            classNames?.trigger
+          )
         },
-        /* @__PURE__ */ React36.createElement(SelectValue, { className: cn("single-value", classNames?.value) }, ({ isPlaceholder, selectedItems, selectedText }) => {
+        /* @__PURE__ */ React13.createElement(SelectValue, { className: cn("single-value", classNames?.value) }, ({ isPlaceholder, selectedItems, selectedText }) => {
           if (isPlaceholder) {
-            return /* @__PURE__ */ React36.createElement(
+            return /* @__PURE__ */ React13.createElement(
               "span",
               {
                 style: styles?.placeholder,
@@ -1855,13 +2034,13 @@ function Select({
             );
           }
           if (isMultiple) {
-            return /* @__PURE__ */ React36.createElement("div", { className: "flex flex-wrap gap-1" }, selectedItems.map(
-              (item, index) => item == null ? null : renderValue?.(item) ?? /* @__PURE__ */ React36.createElement(
+            return /* @__PURE__ */ React13.createElement("div", { className: "flex flex-wrap gap-1" }, selectedItems.map(
+              (item, index) => item == null ? null : renderValue?.(item) ?? /* @__PURE__ */ React13.createElement(
                 Tag,
                 {
                   size: "md",
                   variant: "pastel",
-                  color,
+                  color: resolvedColor,
                   key: index
                 },
                 labelOf(item)
@@ -1869,7 +2048,7 @@ function Select({
             ));
           }
           const selectedItem = selectedItems[0] ?? null;
-          return /* @__PURE__ */ React36.createElement(
+          return /* @__PURE__ */ React13.createElement(
             "div",
             {
               className: cn("single-value", classNames?.value),
@@ -1878,23 +2057,32 @@ function Select({
             (selectedItem && renderValue?.(selectedItem)) ?? labelOf(selectedItem) ?? selectedText
           );
         }),
-        /* @__PURE__ */ React36.createElement(HiSelector, { className: "selector", size: 18 })
+        /* @__PURE__ */ React13.createElement(
+          HiSelector,
+          {
+            className: "selector",
+            size: 18,
+            "data-variant": "solid",
+            "data-interactive": "false"
+          }
+        )
       )
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Popover$1,
       {
         offset: 4,
         className: cn("prt-popover", "prt-select-popover", classNames?.popover),
         style: styles?.popover
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         ListBox,
         {
           items,
           labelKey,
           valueKey,
           sectionKey,
+          disabledKeys,
           renderOption,
           renderSectionLabel,
           showSectionSeparator,
@@ -1911,7 +2099,7 @@ function CalendarBody({
   numberOfMonths = 1,
   showMonthAndYearPickers = false
 }) {
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement("header", { className: "prt-calendar-header" }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("header", { className: "prt-calendar-header" }, /* @__PURE__ */ React13.createElement(
     IconButton,
     {
       slot: "previous",
@@ -1920,8 +2108,8 @@ function CalendarBody({
       size: "sm",
       color: "gray"
     },
-    /* @__PURE__ */ React36.createElement(HiChevronLeft, { size: 20 })
-  ), showMonthAndYearPickers ? /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2 prt-calendar-selects" }, /* @__PURE__ */ React36.createElement(CalendarMonthPicker, null, ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(HiChevronLeft, { size: 20 })
+  ), showMonthAndYearPickers ? /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2 prt-calendar-selects" }, /* @__PURE__ */ React13.createElement(CalendarMonthPicker, null, ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ React13.createElement(
     Select,
     {
       "aria-label": ariaLabel,
@@ -1930,10 +2118,10 @@ function CalendarBody({
       valueKey: "id",
       labelKey: "formatted",
       value,
-      onChange: (e) => onChange(e.target.value),
+      onChange: (v) => v != null && onChange(Number(v)),
       items
     }
-  )), /* @__PURE__ */ React36.createElement(CalendarYearPicker, null, ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ React36.createElement(
+  )), /* @__PURE__ */ React13.createElement(CalendarYearPicker, null, ({ "aria-label": ariaLabel, value, onChange, items }) => /* @__PURE__ */ React13.createElement(
     Select,
     {
       "aria-label": ariaLabel,
@@ -1942,10 +2130,10 @@ function CalendarBody({
       valueKey: "id",
       labelKey: "formatted",
       value,
-      onChange: (e) => onChange(e.target.value),
+      onChange: (v) => v != null && onChange(Number(v)),
       items
     }
-  ))) : /* @__PURE__ */ React36.createElement(Heading, { className: "prt-calendar-heading" }), /* @__PURE__ */ React36.createElement(
+  ))) : /* @__PURE__ */ React13.createElement(Heading, { className: "prt-calendar-heading" }), /* @__PURE__ */ React13.createElement(
     IconButton,
     {
       slot: "next",
@@ -1954,16 +2142,16 @@ function CalendarBody({
       size: "sm",
       color: "gray"
     },
-    /* @__PURE__ */ React36.createElement(HiChevronRight, { size: 20 })
-  )), /* @__PURE__ */ React36.createElement("div", { className: "prt-calendar-months" }, Array.from({ length: numberOfMonths }, (_, i) => /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(HiChevronRight, { size: 20 })
+  )), /* @__PURE__ */ React13.createElement("div", { className: "prt-calendar-months" }, Array.from({ length: numberOfMonths }, (_, i) => /* @__PURE__ */ React13.createElement(
     CalendarGrid,
     {
       key: i,
       offset: { months: i },
       className: "prt-calendar-grid"
     },
-    /* @__PURE__ */ React36.createElement(CalendarGridHeader, null, (day) => /* @__PURE__ */ React36.createElement(CalendarHeaderCell, { className: "prt-date-weekday" }, day)),
-    /* @__PURE__ */ React36.createElement(CalendarGridBody, null, (date) => /* @__PURE__ */ React36.createElement(CalendarCell, { date, className: "prt-date-cell" }))
+    /* @__PURE__ */ React13.createElement(CalendarGridHeader, null, (day) => /* @__PURE__ */ React13.createElement(CalendarHeaderCell, { className: "prt-date-weekday" }, day)),
+    /* @__PURE__ */ React13.createElement(CalendarGridBody, null, (date) => /* @__PURE__ */ React13.createElement(CalendarCell, { date, className: "prt-date-cell" }))
   ))));
 }
 function Calendar({
@@ -1975,17 +2163,19 @@ function Calendar({
   ...props
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Calendar$1,
     {
       ...props,
       ref,
       visibleDuration: { months: numberOfMonths },
       "data-color": color ?? theme?.color ?? "primary",
+      "data-variant": "solid",
+      "data-interactive": "false",
       "data-radius": radius ?? theme?.radius ?? "lg",
       className: "prt-calendar-wrapper"
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       CalendarBody,
       {
         numberOfMonths,
@@ -2003,18 +2193,20 @@ function RangeCalendar({
   ...props
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     RangeCalendar$1,
     {
       ...props,
       ref,
       visibleDuration: { months: numberOfMonths },
       "data-color": color ?? theme?.color ?? "primary",
+      "data-variant": "solid",
+      "data-interactive": "false",
       "data-radius": radius ?? theme?.radius ?? "lg",
       "data-range": "true",
       className: "prt-calendar-wrapper"
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       CalendarBody,
       {
         numberOfMonths,
@@ -2024,13 +2216,22 @@ function RangeCalendar({
   );
 }
 function DateSegments({ slot, className }) {
-  return /* @__PURE__ */ React36.createElement(DateInput, { slot, className: cn("prt-date-field", className) }, (segment) => /* @__PURE__ */ React36.createElement(DateSegment, { segment, className: "prt-date-input-segment" }));
+  return /* @__PURE__ */ React13.createElement(
+    DateInput,
+    {
+      slot,
+      "data-variant": "solid",
+      "data-interactive": "false",
+      className: cn("prt-date-field", className)
+    },
+    (segment) => /* @__PURE__ */ React13.createElement(DateSegment, { segment, className: "prt-date-input-segment" })
+  );
 }
 
 // src/components/date/date-field.tsx
 function DateField({
   appearance = "outline",
-  size = "md",
+  size,
   color,
   radius,
   value,
@@ -2049,10 +2250,12 @@ function DateField({
   ref,
   ...props
 }) {
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "md";
   function handleChange(date) {
     onChange?.(date?.toString() ?? null, date);
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     DateField$1,
     {
       ...props,
@@ -2061,7 +2264,7 @@ function DateField({
       onChange: handleChange,
       isInvalid: !!error
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         replaceDefaultControlWrapper: true,
@@ -2069,7 +2272,7 @@ function DateField({
         error,
         description,
         color,
-        size,
+        size: resolvedSize,
         radius,
         appearance,
         validationStatus,
@@ -2078,7 +2281,7 @@ function DateField({
         style,
         styles
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Group,
         {
           ref,
@@ -2086,16 +2289,16 @@ function DateField({
           "data-color": color,
           className: cn("prt-input-control", "date-field-control")
         },
-        prepend && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
-        /* @__PURE__ */ React36.createElement(DateSegments, null),
-        append && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
+        prepend && /* @__PURE__ */ React13.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
+        /* @__PURE__ */ React13.createElement(DateSegments, null),
+        append && /* @__PURE__ */ React13.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
       )
     )
   );
 }
 function TimeField({
   appearance = "outline",
-  size = "md",
+  size,
   color,
   radius,
   value,
@@ -2114,10 +2317,12 @@ function TimeField({
   ref,
   ...props
 }) {
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "md";
   function handleChange(time) {
     onChange?.(time?.toString() ?? null, time);
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     TimeField$1,
     {
       ...props,
@@ -2126,7 +2331,7 @@ function TimeField({
       onChange: handleChange,
       isInvalid: !!error
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         replaceDefaultControlWrapper: true,
@@ -2134,7 +2339,7 @@ function TimeField({
         error,
         description,
         color,
-        size,
+        size: resolvedSize,
         radius,
         appearance,
         validationStatus,
@@ -2143,7 +2348,7 @@ function TimeField({
         style,
         styles
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Group,
         {
           ref,
@@ -2151,21 +2356,21 @@ function TimeField({
           "data-color": color,
           className: cn("prt-input-control", "date-field-control")
         },
-        prepend && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
-        /* @__PURE__ */ React36.createElement(DateSegments, null),
-        append && /* @__PURE__ */ React36.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
+        prepend && /* @__PURE__ */ React13.createElement("div", { className: "add-on add-on-left flex items-center" }, prepend),
+        /* @__PURE__ */ React13.createElement(DateSegments, null),
+        append && /* @__PURE__ */ React13.createElement("div", { className: "add-on add-on-right flex items-center" }, append)
       )
     )
   );
 }
 function DatePicker({
   appearance = "outline",
-  size = "md",
+  size,
   color,
   numberOfMonths,
   showMonthAndYearPickers,
   radius,
-  selectorIcon = /* @__PURE__ */ React36.createElement(HiOutlineCalendar, { size: 16 }),
+  selectorIcon = /* @__PURE__ */ React13.createElement(HiOutlineCalendar, { size: 16 }),
   value,
   defaultValue,
   onChange,
@@ -2180,10 +2385,12 @@ function DatePicker({
   ref,
   ...props
 }) {
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "md";
   function handleChange(date) {
     onChange?.(date?.toString() ?? null, date);
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     DatePicker$1,
     {
       ...props,
@@ -2192,7 +2399,7 @@ function DatePicker({
       onChange: handleChange,
       isInvalid: !!error
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         replaceDefaultControlWrapper: true,
@@ -2200,7 +2407,7 @@ function DatePicker({
         error,
         description,
         color,
-        size,
+        size: resolvedSize,
         radius,
         appearance,
         validationStatus,
@@ -2209,7 +2416,7 @@ function DatePicker({
         style,
         styles
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Group,
         {
           ref,
@@ -2217,18 +2424,18 @@ function DatePicker({
           "data-color": color,
           className: cn("prt-input-control", "prt-date-picker-trigger")
         },
-        /* @__PURE__ */ React36.createElement(DateSegments, null),
-        /* @__PURE__ */ React36.createElement(IconButton, { size: "sm", variant: "light", color }, selectorIcon)
+        /* @__PURE__ */ React13.createElement(DateSegments, null),
+        /* @__PURE__ */ React13.createElement(IconButton, { size: "sm", variant: "light", color }, selectorIcon)
       )
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Popover$1,
       {
         offset: 8,
         placement: "bottom start",
         className: cn("prt-popover", "prt-date-popover")
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Calendar,
         {
           color,
@@ -2245,12 +2452,12 @@ function toRange(value) {
 }
 function DateRangePicker({
   appearance = "outline",
-  size = "md",
+  size,
   color,
   numberOfMonths = 2,
   showMonthAndYearPickers,
   radius,
-  dropdownIcon = /* @__PURE__ */ React36.createElement(HiOutlineCalendar, { size: 16 }),
+  dropdownIcon = /* @__PURE__ */ React13.createElement(HiOutlineCalendar, { size: 16 }),
   value,
   defaultValue,
   onChange,
@@ -2271,7 +2478,9 @@ function DateRangePicker({
       range
     );
   }
-  return /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "md";
+  return /* @__PURE__ */ React13.createElement(
     DateRangePicker$1,
     {
       ...props,
@@ -2280,7 +2489,7 @@ function DateRangePicker({
       onChange: handleChange,
       isInvalid: !!error
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         replaceDefaultControlWrapper: true,
@@ -2288,7 +2497,7 @@ function DateRangePicker({
         error,
         description,
         color,
-        size,
+        size: resolvedSize,
         radius,
         appearance,
         validationStatus,
@@ -2297,7 +2506,7 @@ function DateRangePicker({
         style,
         styles
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Group,
         {
           ref,
@@ -2305,18 +2514,27 @@ function DateRangePicker({
           "data-color": color,
           className: cn("prt-input-control", "prt-date-picker-trigger")
         },
-        /* @__PURE__ */ React36.createElement("div", { className: "prt-date-range-fields" }, /* @__PURE__ */ React36.createElement(DateSegments, { slot: "start" }), /* @__PURE__ */ React36.createElement("span", { "aria-hidden": "true", className: "prt-date-range-sep" }, "\u2013"), /* @__PURE__ */ React36.createElement(DateSegments, { slot: "end" })),
-        /* @__PURE__ */ React36.createElement(IconButton, { size: "sm", variant: "light", color }, dropdownIcon)
+        /* @__PURE__ */ React13.createElement("div", { className: "prt-date-range-fields" }, /* @__PURE__ */ React13.createElement(DateSegments, { slot: "start" }), /* @__PURE__ */ React13.createElement(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-variant": "solid",
+            "data-interactive": "false",
+            className: "prt-date-range-sep"
+          },
+          "\u2013"
+        ), /* @__PURE__ */ React13.createElement(DateSegments, { slot: "end" })),
+        /* @__PURE__ */ React13.createElement(IconButton, { size: "sm", variant: "light", color }, dropdownIcon)
       )
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Popover$1,
       {
         offset: 8,
         placement: "bottom start",
         className: cn("prt-popover", "prt-date-popover")
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         RangeCalendar,
         {
           color,
@@ -2328,7 +2546,7 @@ function DateRangePicker({
     )
   );
 }
-var AvatarGroupContext = React36.createContext(null);
+var AvatarGroupContext = React13.createContext(null);
 function defaultGetInitials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "";
@@ -2353,18 +2571,18 @@ function Avatar({
   ref,
   ...props
 }) {
-  const [erroredSrc, setErroredSrc] = React36.useState();
+  const [erroredSrc, setErroredSrc] = React13.useState();
   const theme = useTheme();
-  const group = React36.useContext(AvatarGroupContext);
-  const defaultColor = React36.useMemo(() => {
+  const group = React13.useContext(AvatarGroupContext);
+  const defaultColor = React13.useMemo(() => {
     return supportedColors[hashCode(name || "") % supportedColors.length];
   }, [name]);
-  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedSize = size ?? group?.size ?? theme?.size ?? "md";
   const resolvedVariant = variant ?? group?.variant ?? "light";
   const resolvedColor = color ?? group?.color ?? defaultColor;
   function renderContent() {
     if (src && erroredSrc !== src) {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React13.createElement(
         "img",
         {
           className: cn("prt-avatar-img", classNames?.img),
@@ -2377,7 +2595,7 @@ function Avatar({
     }
     if (children) return children;
     if (name) {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React13.createElement(
         "span",
         {
           className: cn("prt-avatar-fallback", classNames?.fallback),
@@ -2388,12 +2606,12 @@ function Avatar({
     }
     return fallback ?? null;
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       style: { ...style, ...styles?.base },
       className: cn("prt-avatar prt-size", className, classNames?.base),
-      "data-radius": radius ?? theme?.avatarRadiusSize ?? "full",
+      "data-radius": radius ?? theme?.radius ?? "full",
       "data-color": resolvedColor,
       "data-variant": resolvedVariant,
       "data-interactive": false,
@@ -2407,7 +2625,7 @@ function Avatar({
   );
 }
 function AvatarGroup({
-  max,
+  max: max2,
   size,
   color,
   variant,
@@ -2417,21 +2635,21 @@ function AvatarGroup({
   classNames,
   styles
 }) {
-  const value = React36.useMemo(
+  const value = React13.useMemo(
     () => ({ size, color, variant }),
     [size, color, variant]
   );
-  const items = React36.Children.toArray(children);
-  const visible = max != null ? items.slice(0, max) : items;
-  const overflow = max != null ? Math.max(0, items.length - max) : 0;
-  return /* @__PURE__ */ React36.createElement(AvatarGroupContext.Provider, { value }, /* @__PURE__ */ React36.createElement(
+  const items = React13.Children.toArray(children);
+  const visible = max2 != null ? items.slice(0, max2) : items;
+  const overflow = max2 != null ? Math.max(0, items.length - max2) : 0;
+  return /* @__PURE__ */ React13.createElement(AvatarGroupContext.Provider, { value }, /* @__PURE__ */ React13.createElement(
     "div",
     {
       className: cn("prt-avatar-group", className, classNames?.wrapper),
       style: { ...style, ...styles?.wrapper }
     },
     visible,
-    overflow > 0 && /* @__PURE__ */ React36.createElement(
+    overflow > 0 && /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: cn("prt-avatar prt-size", classNames?.overflow),
@@ -2471,7 +2689,7 @@ function FileUploader({
   className,
   style
 }) {
-  const [_uploads, setUploads] = React36.useState([]);
+  const [_uploads, setUploads] = React13.useState([]);
   const uploads = controlledUploads ?? _uploads;
   function onUpload(next) {
     if (isEmptyArray(next)) return;
@@ -2493,15 +2711,15 @@ function FileUploader({
   const isUploading = !allowMultiple && uploads[0]?.status === "loading";
   const isUploaded = !allowMultiple && uploads[0]?.status === "success";
   const isFailed = !allowMultiple && uploads[0]?.status === "error";
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       ref,
       className: cn("flex flex-col gap-2.5", classNames?.wrapper, className),
       style: { ...styles?.wrapper, ...style }
     },
-    label && /* @__PURE__ */ React36.createElement(InputLabel, null, label),
-    /* @__PURE__ */ React36.createElement(
+    label && /* @__PURE__ */ React13.createElement(InputLabel, null, label),
+    /* @__PURE__ */ React13.createElement(
       DropZone,
       {
         "aria-label": typeof label === "string" ? label : "File upload",
@@ -2516,13 +2734,33 @@ function FileUploader({
         },
         "data-radius": "lg",
         "data-color": color,
+        "data-variant": "light",
+        "data-interactive": "false",
         className: cn("prt-file-uploader", classNames?.dropzone),
         style: { ...styles?.dropzone },
         "data-state": allowMultiple || !uploads.length ? "idle" : uploads[0]?.status
       },
-      isIdle && /* @__PURE__ */ React36.createElement(FileTrigger, { allowsMultiple: allowMultiple, onSelect: handleSelect }, /* @__PURE__ */ React36.createElement(Button$1, { className: "prt-file-uploader-trigger" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(HiOutlineDocumentAdd, { className: "state-icon", size: 20 }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-inherit" }, "Click or drag files here to upload")))),
-      isUploading && /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(Loader, { size: "xs" }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-inherit" }, "Name_of_file.ext / Uploading...")),
-      isUploaded && /* @__PURE__ */ React36.createElement("div", { className: "flex w-full items-center justify-between" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(HiOutlineCheckCircle, { size: 16 }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-green-600" }, "File successfully uploaded")), /* @__PURE__ */ React36.createElement(
+      isIdle && /* @__PURE__ */ React13.createElement(FileTrigger, { allowsMultiple: allowMultiple, onSelect: handleSelect }, /* @__PURE__ */ React13.createElement(Button$1, { className: "prt-file-uploader-trigger" }, /* @__PURE__ */ React13.createElement(
+        "div",
+        {
+          "data-variant": "solid",
+          "data-interactive": "false",
+          className: "prt-file-uploader-content flex items-center gap-2.5"
+        },
+        /* @__PURE__ */ React13.createElement(HiOutlineDocumentAdd, { className: "state-icon", size: 20 }),
+        /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-inherit" }, "Click or drag files here to upload")
+      ))),
+      isUploading && /* @__PURE__ */ React13.createElement(
+        "div",
+        {
+          "data-variant": "solid",
+          "data-interactive": "false",
+          className: "prt-file-uploader-content flex items-center gap-2.5"
+        },
+        /* @__PURE__ */ React13.createElement(Loader, { size: "xs" }),
+        /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-inherit" }, "Name_of_file.ext / Uploading...")
+      ),
+      isUploaded && /* @__PURE__ */ React13.createElement("div", { className: "flex w-full items-center justify-between" }, /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React13.createElement(HiOutlineCheckCircle, { size: 16 }), /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-green-600" }, "File successfully uploaded")), /* @__PURE__ */ React13.createElement(
         IconButton,
         {
           onPress: handleRemoveFile,
@@ -2530,9 +2768,9 @@ function FileUploader({
           color: "green",
           size: "xs"
         },
-        /* @__PURE__ */ React36.createElement(HiOutlineTrash, { size: 16 })
+        /* @__PURE__ */ React13.createElement(HiOutlineTrash, { size: 16 })
       )),
-      isFailed && /* @__PURE__ */ React36.createElement("div", { className: "flex w-full justify-between" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React36.createElement(HiOutlineExclamationCircle, { className: "state-icon" }), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-red-600" }, "Failed to upload file")), /* @__PURE__ */ React36.createElement(
+      isFailed && /* @__PURE__ */ React13.createElement("div", { className: "flex w-full justify-between" }, /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React13.createElement(HiOutlineExclamationCircle, { className: "state-icon" }), /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-red-600" }, "Failed to upload file")), /* @__PURE__ */ React13.createElement(
         IconButton,
         {
           onPress: handleRetry,
@@ -2540,18 +2778,18 @@ function FileUploader({
           color: "tomato",
           size: "xs"
         },
-        /* @__PURE__ */ React36.createElement(HiOutlineRefresh, { size: 16 })
+        /* @__PURE__ */ React13.createElement(HiOutlineRefresh, { size: 16 })
       ))
     ),
-    uploads.length > 1 && !hideFileList && /* @__PURE__ */ React36.createElement(
+    uploads.length > 1 && !hideFileList && /* @__PURE__ */ React13.createElement(
       "div",
       {
         style: { marginTop: 10, ...styles?.list },
         className: cn("flex flex-col gap-3 upload-list", classNames?.list)
       },
-      uploads.map((upload) => /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-2.5", key: upload.id }, upload.status === "loading" && /* @__PURE__ */ React36.createElement(Loader, null), upload.status === "success" && /* @__PURE__ */ React36.createElement(HiOutlinePaperClip, null), /* @__PURE__ */ React36.createElement("span", { className: "text-sm text-gray-700" }, upload.name)))
+      uploads.map((upload) => /* @__PURE__ */ React13.createElement("div", { className: "flex items-center gap-2.5", key: upload.id }, upload.status === "loading" && /* @__PURE__ */ React13.createElement(Loader, null), upload.status === "success" && /* @__PURE__ */ React13.createElement(HiOutlinePaperClip, null), /* @__PURE__ */ React13.createElement("span", { className: "text-sm text-gray-700" }, upload.name)))
     ),
-    error && /* @__PURE__ */ React36.createElement(InputError, null, error)
+    error && /* @__PURE__ */ React13.createElement(InputError, null, error)
   );
 }
 function Separator({
@@ -2562,7 +2800,7 @@ function Separator({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       "data-opacity": opacity,
@@ -2585,7 +2823,7 @@ function Progress({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ProgressBar,
     {
       ...props,
@@ -2594,14 +2832,14 @@ function Progress({
       className: cn("progress-bar", className, classNames?.wrapper),
       style: { ...style, ...styles?.wrapper }
     },
-    ({ percentage }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, label && /* @__PURE__ */ React36.createElement(
+    ({ percentage }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, label && /* @__PURE__ */ React13.createElement(
       "span",
       {
         className: cn("text-sm text-gray-700", classNames?.label),
         style: { ...styles?.label }
       },
       label
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: cn("progress-wrapper", classNames?.track),
@@ -2615,16 +2853,18 @@ function Progress({
         },
         ref
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         "div",
         {
+          "data-variant": "solid",
+          "data-interactive": "false",
           className: cn("progress absolute", classNames?.bar),
           style: {
             left: 0,
             top: 0,
             height: "100%",
             width: `${percentage ?? 0}%`,
-            background: "var(--c-solid)",
+            background: "var(--variant-bg)",
             transition: "all 0.3s ease",
             ...styles?.bar
           }
@@ -2635,7 +2875,7 @@ function Progress({
 }
 function Switch({
   color = "violet",
-  size = "sm",
+  size,
   children,
   className,
   style,
@@ -2643,20 +2883,30 @@ function Switch({
   styles,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(SwitchField, { ...props }, /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  return /* @__PURE__ */ React13.createElement(SwitchField, { ...props }, /* @__PURE__ */ React13.createElement(
     SwitchButton,
     {
       className: cn(className, "prt-switch-group", classNames?.wrapper),
       style: { ...style, ...styles?.wrapper }
     },
-    /* @__PURE__ */ React36.createElement("span", { "data-color": color, "data-size": size, className: "prt-switch track" }, /* @__PURE__ */ React36.createElement(
+    ({ isSelected }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
       "span",
       {
-        className: cn("prt-switch-thumb", classNames?.thumb),
-        style: { ...styles?.thumb }
-      }
-    )),
-    children
+        "data-color": color,
+        "data-size": resolvedSize,
+        "data-variant": isSelected ? "solid" : void 0,
+        className: "prt-switch track"
+      },
+      /* @__PURE__ */ React13.createElement(
+        "span",
+        {
+          className: cn("prt-switch-thumb", classNames?.thumb),
+          style: { ...styles?.thumb }
+        }
+      )
+    ), children)
   ));
 }
 function Slider({
@@ -2665,48 +2915,54 @@ function Slider({
   style,
   styles,
   name,
-  size = "sm",
+  size,
   color,
   label,
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "sm";
+  return /* @__PURE__ */ React13.createElement(
     Slider$1,
     {
       ...props,
       orientation,
       "aria-label": typeof label === "string" ? label : props["aria-label"] ?? "slider",
       "data-color": color,
-      "data-size": size,
+      "data-size": resolvedSize,
       style: { ...style, ...styles?.wrapper },
       className: cn("prt-slider", orientation, className, classNames?.wrapper)
     },
-    label && /* @__PURE__ */ React36.createElement(InputLabel, { style: styles?.label, className: classNames?.label }, label),
-    /* @__PURE__ */ React36.createElement(
+    label && /* @__PURE__ */ React13.createElement(InputLabel, { style: styles?.label, className: classNames?.label }, label),
+    /* @__PURE__ */ React13.createElement(
       SliderTrack,
       {
         className: cn("prt-slider-track", classNames?.track),
         style: styles?.track
       },
-      ({ state }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+      ({ state }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
         "div",
         {
+          "data-variant": "solid",
+          "data-interactive": "false",
           style: {
             ...styles?.fill,
             width: `${state.getThumbPercent(0) * 100}%`
           },
           className: cn("prt-slider-track-fill", classNames?.fill)
         }
-      ), /* @__PURE__ */ React36.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         SliderThumb,
         {
           index: 0,
           name,
+          "data-variant": "solid",
+          "data-interactive": "false",
           className: cn("prt-slider-thumb", classNames?.thumb),
           style: styles?.thumb
         },
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React13.createElement(
           "div",
           {
             style: styles?.innerThumb,
@@ -2729,7 +2985,7 @@ function Sticker({
   ...props
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ React36__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(
     "div",
     {
       ref,
@@ -2756,11 +3012,11 @@ function Tabs({
   ...props
 }) {
   const theme = useTheme();
-  const tabListRef = React36.useRef(null);
-  const [indicator, setIndicator] = React36.useState({ width: 0, left: 0 });
+  const tabListRef = React13.useRef(null);
+  const [indicator, setIndicator] = React13.useState({ width: 0, left: 0 });
   const tabs = [];
-  React36.Children.forEach(children, (child, index) => {
-    if (React36.isValidElement(child)) {
+  React13.Children.forEach(children, (child, index) => {
+    if (React13.isValidElement(child)) {
       tabs.push({
         id: child.props.id ?? child.key ?? index,
         title: child.props.title,
@@ -2769,13 +3025,13 @@ function Tabs({
       });
     }
   });
-  const [activeKey, setActiveKey] = React36.useState(
+  const [activeKey, setActiveKey] = React13.useState(
     props.selectedKey ?? props.defaultSelectedKey ?? tabs[0]?.id
   );
-  React36.useEffect(() => {
+  React13.useEffect(() => {
     if (props.selectedKey != null) setActiveKey(props.selectedKey);
   }, [props.selectedKey]);
-  React36.useEffect(() => {
+  React13.useEffect(() => {
     const list = tabListRef.current;
     const selected = list?.querySelector(
       ".prt-tab[data-selected]"
@@ -2786,7 +3042,7 @@ function Tabs({
       setIndicator({ width: sb.width, left: sb.left - lb.left });
     }
   }, [activeKey, tabs.length]);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Tabs$1,
     {
       ...props,
@@ -2798,7 +3054,7 @@ function Tabs({
       className: cn("prt-tabs", className, classNames?.wrapper),
       style: { position: "relative", ...style, ...styles?.wrapper }
     },
-    /* @__PURE__ */ React36.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React13.createElement(
       TabList,
       {
         ref: tabListRef,
@@ -2806,7 +3062,7 @@ function Tabs({
         style: { ...styles?.list },
         items: tabs
       },
-      (tab) => /* @__PURE__ */ React36.createElement(
+      (tab) => /* @__PURE__ */ React13.createElement(
         Tab$1,
         {
           id: tab.id,
@@ -2816,7 +3072,7 @@ function Tabs({
         },
         tab.title
       )
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: cn("indicator", classNames?.indicator),
@@ -2833,7 +3089,7 @@ function Tabs({
         }
       }
     )),
-    tabs.map((tab) => /* @__PURE__ */ React36.createElement(
+    tabs.map((tab) => /* @__PURE__ */ React13.createElement(
       TabPanel,
       {
         key: String(tab.id),
@@ -2856,6 +3112,7 @@ function Table({
   selectionMode = "none",
   selectedKeys,
   onSelectionChange,
+  onRowAction,
   sortDescriptor,
   onSortChange,
   renderEmptyState,
@@ -2866,14 +3123,13 @@ function Table({
   styles,
   ...props
 }) {
-  const racColumns = React36.useMemo(
+  const racColumns = React13.useMemo(
     () => columns.map((column) => ({ ...column, id: column.key })),
     [columns]
   );
-  const firstColumnKey = columns[0]?.key;
-  const [internalSort, setInternalSort] = React36.useState();
+  const [internalSort, setInternalSort] = React13.useState();
   const activeSort = onSortChange ? sortDescriptor : internalSort;
-  const rows = React36.useMemo(() => {
+  const rows = React13.useMemo(() => {
     if (onSortChange || !activeSort) return data;
     const column = columns.find((c) => c.key === activeSort.column);
     if (!column) return data;
@@ -2884,63 +3140,94 @@ function Table({
       return activeSort.direction === "descending" ? -cmp : cmp;
     });
   }, [data, columns, activeSort, onSortChange]);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Table$1,
     {
       ...props,
       selectionMode,
       selectedKeys,
       onSelectionChange,
+      onRowAction: onRowAction ? (key) => onRowAction(key) : void 0,
       sortDescriptor: activeSort,
       onSortChange: onSortChange ?? setInternalSort,
       "data-radius": radius,
       className: cn("prt-table", className, classNames?.wrapper),
       style: { ...style, ...styles?.wrapper }
     },
-    /* @__PURE__ */ React36.createElement(
-      TableHeader,
+    /* @__PURE__ */ React13.createElement(
+      TableHead,
       {
-        columns: racColumns,
-        className: cn("prt-table-header", classNames?.header)
-      },
-      (column) => /* @__PURE__ */ React36.createElement(
-        Column,
-        {
-          isRowHeader: column.key === firstColumnKey,
-          allowsSorting: column.allowSorting,
-          className: cn("prt-table-column", classNames?.column),
-          style: styles?.column
-        },
-        ({ allowsSorting, sortDirection }) => /* @__PURE__ */ React36.createElement("div", { className: "prt-table-column-header" }, /* @__PURE__ */ React36.createElement("span", null, column.title), allowsSorting && sortDirection && /* @__PURE__ */ React36.createElement("span", { "aria-hidden": "true", className: "prt-table-sort-indicator" }, sortDirection === "ascending" ? /* @__PURE__ */ React36.createElement(HiChevronUp, { size: 14 }) : /* @__PURE__ */ React36.createElement(HiChevronDown, { size: 14 })))
-      )
+        columns,
+        racColumns,
+        classNames,
+        styles
+      }
     ),
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       TableBody,
       {
         items: rows,
         dependencies: [columns],
-        renderEmptyState: renderEmptyState ? () => /* @__PURE__ */ React36.createElement(React36.Fragment, null, renderEmptyState()) : void 0
+        renderEmptyState: renderEmptyState ? () => /* @__PURE__ */ React13.createElement("div", { className: "prt-table-empty" }, renderEmptyState()) : void 0
       },
-      (item) => /* @__PURE__ */ React36.createElement(
-        Row,
+      (item) => /* @__PURE__ */ React13.createElement(
+        TableBodyRow,
         {
+          item,
           id: getRowId(item),
-          columns: racColumns,
-          className: cn("prt-table-row", classNames?.row),
-          style: styles?.row
-        },
-        (column) => /* @__PURE__ */ React36.createElement(
-          Cell,
-          {
-            className: cn("prt-table-cell", classNames?.cell),
-            style: styles?.cell
-          },
-          column.render ? column.render(item[column.dataIndex], item) : item[column.dataIndex]
-        )
+          racColumns,
+          classNames,
+          styles
+        }
       )
     )
   );
 }
+function TableHead({
+  columns,
+  racColumns,
+  classNames,
+  styles
+}) {
+  const { selectionBehavior, selectionMode } = useTableOptions();
+  const firstColumnKey = columns[0]?.key;
+  return /* @__PURE__ */ React13.createElement(TableHeader, { className: cn("prt-table-header", classNames?.header) }, selectionBehavior === "toggle" && /* @__PURE__ */ React13.createElement(Column, { className: "prt-table-column prt-table-selection" }, selectionMode === "multiple" ? /* @__PURE__ */ React13.createElement(Checkbox, { slot: "selection", size: "sm" }) : null), /* @__PURE__ */ React13.createElement(Collection, { items: racColumns }, (column) => /* @__PURE__ */ React13.createElement(
+    Column,
+    {
+      isRowHeader: column.key === firstColumnKey,
+      allowsSorting: column.allowSorting,
+      className: cn("prt-table-column", classNames?.column),
+      style: styles?.column
+    },
+    ({ allowsSorting, sortDirection }) => /* @__PURE__ */ React13.createElement("div", { className: "prt-table-column-header" }, /* @__PURE__ */ React13.createElement("span", null, column.title), allowsSorting && sortDirection && /* @__PURE__ */ React13.createElement("span", { "aria-hidden": "true", className: "prt-table-sort-indicator" }, sortDirection === "ascending" ? /* @__PURE__ */ React13.createElement(HiChevronUp, { size: 14 }) : /* @__PURE__ */ React13.createElement(HiChevronDown, { size: 14 })))
+  )));
+}
+function TableBodyRow({
+  item,
+  id: id2,
+  racColumns,
+  classNames,
+  styles
+}) {
+  const { selectionBehavior } = useTableOptions();
+  return /* @__PURE__ */ React13.createElement(
+    Row,
+    {
+      id: id2,
+      className: cn("prt-table-row", classNames?.row),
+      style: styles?.row
+    },
+    selectionBehavior === "toggle" && /* @__PURE__ */ React13.createElement(Cell, { className: "prt-table-cell prt-table-selection" }, /* @__PURE__ */ React13.createElement(Checkbox, { slot: "selection", size: "sm" })),
+    /* @__PURE__ */ React13.createElement(Collection, { items: racColumns }, (column) => /* @__PURE__ */ React13.createElement(
+      Cell,
+      {
+        className: cn("prt-table-cell", classNames?.cell),
+        style: styles?.cell
+      },
+      column.render ? column.render(item[column.dataIndex], item) : item[column.dataIndex]
+    ))
+  );
+}
 function Timeline({
   items,
   render,
@@ -2952,25 +3239,25 @@ function Timeline({
   className,
   style
 }) {
-  return /* @__PURE__ */ React36__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(
     "div",
     {
       className: cn(classNames?.wrapper, className),
       style: { ...styles?.wrapper, ...style }
     },
     items.map((item, index) => {
-      const indicator = getIndicator?.(item) ?? /* @__PURE__ */ React36__default.createElement("div", { className: "prt-timeline-indicator", "data-variant": "outline" });
+      const indicator = getIndicator?.(item) ?? /* @__PURE__ */ React13__default.createElement("div", { className: "prt-timeline-indicator", "data-variant": "outline" });
       const content = render?.(item) ?? item[labelKey];
       const isLast = index === items.length - 1;
-      return /* @__PURE__ */ React36__default.createElement(
+      return /* @__PURE__ */ React13__default.createElement(
         "div",
         {
           className: cn("flex gap-3 prt-timeline-item", classNames?.item),
           style: { ...styles?.item },
           key: index
         },
-        /* @__PURE__ */ React36__default.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React36__default.createElement("div", { className: "flex gap-3 prt-timeline-indicator-container" }, indicator), isLast && hideLastItemTail ? null : /* @__PURE__ */ React36__default.createElement("div", { className: "prt-timeline-item-tail" })),
-        /* @__PURE__ */ React36__default.createElement(
+        /* @__PURE__ */ React13__default.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React13__default.createElement("div", { className: "flex gap-3 prt-timeline-indicator-container" }, indicator), isLast && hideLastItemTail ? null : /* @__PURE__ */ React13__default.createElement("div", { className: "prt-timeline-item-tail" })),
+        /* @__PURE__ */ React13__default.createElement(
           "div",
           {
             className: cn(
@@ -3009,7 +3296,7 @@ function Modal({
   ...props
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ModalOverlay,
     {
       ...props,
@@ -3017,14 +3304,14 @@ function Modal({
       style: styles?.underlay,
       className: cn("prt-modal-underlay", classNames?.underlay)
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Modal$1,
       {
-        "data-variant": variant,
+        "data-layout": variant,
         style: styles?.wrapper,
         className: cn("prt-modal-container", classNames?.wrapper)
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Dialog,
         {
           "aria-label": typeof title === "string" ? title : void 0,
@@ -3032,7 +3319,7 @@ function Modal({
           className: cn("prt-modal-content", className, classNames?.content),
           style: { width, ...style, ...styles?.content }
         },
-        ({ close }) => /* @__PURE__ */ React36.createElement(React36.Fragment, null, !hideTitle && /* @__PURE__ */ React36.createElement(
+        ({ close }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, !hideTitle && /* @__PURE__ */ React13.createElement(
           "header",
           {
             style: styles?.header,
@@ -3041,7 +3328,7 @@ function Modal({
               classNames?.header
             )
           },
-          /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-1" }, title && /* @__PURE__ */ React36.createElement(
+          /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-1" }, title && /* @__PURE__ */ React13.createElement(
             "div",
             {
               style: styles?.title,
@@ -3051,8 +3338,8 @@ function Modal({
               )
             },
             title
-          ), description && /* @__PURE__ */ React36.createElement("div", { className: "text-xs leading-normal text-gray-500" }, description)),
-          showCloseButton && /* @__PURE__ */ React36.createElement(
+          ), description && /* @__PURE__ */ React13.createElement("div", { className: "text-xs leading-normal text-gray-500" }, description)),
+          showCloseButton && /* @__PURE__ */ React13.createElement(
             IconButton,
             {
               variant: "ghost",
@@ -3063,9 +3350,9 @@ function Modal({
                 close();
               }
             },
-            /* @__PURE__ */ React36.createElement(HiX, { size: 18 })
+            /* @__PURE__ */ React13.createElement(HiX, { size: 18 })
           )
-        ), /* @__PURE__ */ React36.createElement(
+        ), /* @__PURE__ */ React13.createElement(
           "div",
           {
             className: cn(
@@ -3075,7 +3362,7 @@ function Modal({
             style: styles?.body
           },
           children
-        ), (onConfirm || onCancel) && /* @__PURE__ */ React36.createElement(
+        ), (onConfirm || onCancel) && /* @__PURE__ */ React13.createElement(
           "footer",
           {
             style: styles?.footer,
@@ -3084,7 +3371,7 @@ function Modal({
               classNames?.footer
             )
           },
-          onCancel && /* @__PURE__ */ React36.createElement(
+          onCancel && /* @__PURE__ */ React13.createElement(
             Button,
             {
               onPress: () => {
@@ -3097,7 +3384,7 @@ function Modal({
             },
             cancelLabel
           ),
-          onConfirm && /* @__PURE__ */ React36.createElement(Button, { onPress: onConfirm, ...confirmButtonProps }, confirmLabel)
+          onConfirm && /* @__PURE__ */ React13.createElement(Button, { onPress: onConfirm, ...confirmButtonProps }, confirmLabel)
         ))
       )
     )
@@ -3106,14 +3393,89 @@ function Modal({
 function useModal(props = {}) {
   return useOverlayTriggerState(props);
 }
+var ModalContext = React13.createContext(null);
+var counter = 0;
+function uid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `prt-modal-${++counter}`;
+}
+function ModalProvider({ registry, children }) {
+  const registryRef = React13.useRef(registry);
+  registryRef.current = registry;
+  const [stack, setStack] = React13.useState([]);
+  const stackRef = React13.useRef(stack);
+  stackRef.current = stack;
+  const closeById = React13.useCallback((id2, result) => {
+    setStack((prev) => {
+      prev.find((m) => m.id === id2)?.resolve(result);
+      return prev.filter((m) => m.id !== id2);
+    });
+  }, []);
+  const controls = React13.useMemo(
+    () => ({
+      open: (key, props) => new Promise((resolve) => {
+        setStack((prev) => [
+          ...prev,
+          {
+            id: uid(),
+            key,
+            props: props ?? {},
+            resolve
+          }
+        ]);
+      }),
+      close: (key) => {
+        setStack((prev) => {
+          for (const m of prev) if (m.key === key) m.resolve(void 0);
+          return prev.filter((m) => m.key !== key);
+        });
+      },
+      update: (key, props) => {
+        setStack(
+          (prev) => prev.map(
+            (m) => m.key === key ? { ...m, props: { ...m.props, ...props } } : m
+          )
+        );
+      },
+      isOpen: (key) => stackRef.current.some((m) => m.key === key)
+    }),
+    []
+  );
+  return /* @__PURE__ */ React13.createElement(ModalContext.Provider, { value: controls }, children, stack.map((instance) => {
+    const def = registryRef.current[instance.key];
+    if (!def) return null;
+    const Component = def.component;
+    return /* @__PURE__ */ React13.createElement(
+      Component,
+      {
+        key: instance.id,
+        ...instance.props,
+        isOpen: true,
+        onOpenChange: (open) => {
+          if (!open) closeById(instance.id, void 0);
+        },
+        onResolve: (result) => closeById(instance.id, result)
+      }
+    );
+  }));
+}
+function useModals() {
+  const ctx = React13.useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("useModals must be used within <ModalProvider>");
+  }
+  return ctx;
+}
 
 // src/utils/regex.ts
 var EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 function useControlledState(value, defaultValue, onChange) {
-  const [state, setState] = React36.useState(value || defaultValue);
+  const [state, setState] = React13.useState(value || defaultValue);
   const isControlled = !isUndefinedOrNull(value);
   const controlledValue = isControlled ? value : state;
-  const setValue = React36.useCallback(
+  const setValue = React13.useCallback(
     (value2) => {
       if (!isControlled) {
         setState(value2);
@@ -3157,7 +3519,7 @@ function escapeRegExp(value) {
 }
 function TagInput({
   appearance = "outline",
-  size = "md",
+  size,
   label,
   error,
   description,
@@ -3184,15 +3546,17 @@ function TagInput({
   renderTag,
   ref
 }) {
-  const [inputValue, setInputValue] = React36.useState("");
+  const theme = useTheme();
+  const resolvedSize = size ?? theme?.size ?? "md";
+  const [inputValue, setInputValue] = React13.useState("");
   const [values, setValues] = useControlledState(
     dedupe(tags),
     dedupe(defaultTags) ?? [],
     onChange
   );
-  const inputRef = React36.useRef(null);
+  const inputRef = React13.useRef(null);
   const isValid = validate ?? FORMAT_VALIDATORS[format];
-  const splitPattern = React36.useMemo(
+  const splitPattern = React13.useMemo(
     () => new RegExp(`[${delimiters.map(escapeRegExp).join("")}\\n]`),
     [delimiters]
   );
@@ -3231,7 +3595,7 @@ function TagInput({
     inputRef.current?.focus();
   }
   const groupLabel = typeof label === "string" ? label : "tags";
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     TextField,
     {
       value: inputValue,
@@ -3239,7 +3603,7 @@ function TagInput({
       isRequired,
       isInvalid: !!error
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         replaceDefaultControlWrapper: true,
@@ -3247,7 +3611,7 @@ function TagInput({
         error,
         description,
         color,
-        size,
+        size: resolvedSize,
         radius,
         appearance,
         validationStatus,
@@ -3256,7 +3620,7 @@ function TagInput({
         style,
         styles
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         "div",
         {
           ref,
@@ -3264,14 +3628,14 @@ function TagInput({
           "data-appearance": appearance,
           onClick: captureFocus
         },
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React13.createElement(
           TagGroup$1,
           {
             "aria-label": groupLabel,
             className: "prt-tag-field-group",
             onRemove: (keys) => setValues(values.filter((v) => !keys.has(v)))
           },
-          /* @__PURE__ */ React36.createElement(TagList, { className: "prt-tag-field-list" }, values.map((value) => /* @__PURE__ */ React36.createElement(
+          /* @__PURE__ */ React13.createElement(TagList, { className: "prt-tag-field-list" }, values.map((value) => /* @__PURE__ */ React13.createElement(
             Tag$1,
             {
               key: value,
@@ -3279,28 +3643,28 @@ function TagInput({
               textValue: value,
               className: "prt-tag-field-tag"
             },
-            renderTag ? renderTag(value, removeValue) : /* @__PURE__ */ React36.createElement(
+            renderTag ? renderTag(value, removeValue) : /* @__PURE__ */ React13.createElement(
               Tag,
               {
                 variant: tagVariant,
                 color: tagColor,
                 radius: tagShape ? SHAPE_RADIUS[tagShape] : "full",
                 size: tagSize,
-                append: /* @__PURE__ */ React36.createElement(
+                append: /* @__PURE__ */ React13.createElement(
                   Button$1,
                   {
                     slot: "remove",
                     className: "prt-tag-field-remove",
                     "aria-label": `Remove ${value}`
                   },
-                  /* @__PURE__ */ React36.createElement(HiX, { size: 14 })
+                  /* @__PURE__ */ React13.createElement(HiX, { size: 14 })
                 )
               },
               value
             )
           )))
         ),
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React13.createElement(
           Input$1,
           {
             ref: inputRef,
@@ -3313,22 +3677,22 @@ function TagInput({
     )
   );
 }
-var PopoverContext = React36.createContext(null);
+var PopoverContext = React13.createContext(null);
 function usePopoverContext(component) {
-  const ctx = React36.useContext(PopoverContext);
+  const ctx = React13.useContext(PopoverContext);
   if (!ctx) {
     throw new Error(`${component} must be used within a Popover`);
   }
   return ctx;
 }
 function Popover({ children, ...props }) {
-  const triggerRef = React36.useRef(null);
+  const triggerRef = React13.useRef(null);
   const state = useOverlayTriggerState(props);
-  return /* @__PURE__ */ React36.createElement(PopoverContext.Provider, { value: { triggerRef, state } }, children);
+  return /* @__PURE__ */ React13.createElement(PopoverContext.Provider, { value: { triggerRef, state } }, children);
 }
 function PopoverTrigger({ children }) {
   const ctx = usePopoverContext("PopoverTrigger");
-  return React36.cloneElement(children, {
+  return React13.cloneElement(children, {
     ref: ctx.triggerRef,
     onPress: () => ctx.state.toggle()
   });
@@ -3346,7 +3710,7 @@ function PopoverContent({
 }) {
   const ctx = usePopoverContext("PopoverContent");
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Popover$1,
     {
       ...props,
@@ -3360,7 +3724,7 @@ function PopoverContent({
       className: cn("prt-popover", classNames?.popover),
       style: { ...width != null ? { width } : null, ...styles?.popover }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         "data-radius": "md",
@@ -3371,7 +3735,7 @@ function PopoverContent({
     )
   );
 }
-var TagGroupVariantContext = React36.createContext({});
+var TagGroupVariantContext = React13.createContext({});
 function TagGroup({
   label,
   description,
@@ -3390,24 +3754,24 @@ function TagGroup({
   style,
   ...props
 }) {
-  const variants = React36.useMemo(
+  const variants = React13.useMemo(
     () => ({ activeColor, activeVariant, idleColor, idleVariant, autoColor }),
     [activeColor, activeVariant, idleColor, idleVariant, autoColor]
   );
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     TagGroup$1,
     {
       ...props,
       "aria-label": typeof label === "string" ? label : void 0
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: cn("flex flex-col gap-3 tag-group", classNames?.wrapper, className),
         style: { ...styles?.wrapper, ...style }
       },
-      label && /* @__PURE__ */ React36.createElement(InputLabel, null, label),
-      /* @__PURE__ */ React36.createElement(TagGroupVariantContext.Provider, { value: variants }, /* @__PURE__ */ React36.createElement(
+      label && /* @__PURE__ */ React13.createElement(InputLabel, null, label),
+      /* @__PURE__ */ React13.createElement(TagGroupVariantContext.Provider, { value: variants }, /* @__PURE__ */ React13.createElement(
         TagList,
         {
           items,
@@ -3417,8 +3781,8 @@ function TagGroup({
         },
         children
       )),
-      errorMessage && /* @__PURE__ */ React36.createElement(InputError, null, errorMessage),
-      description && /* @__PURE__ */ React36.createElement("div", { className: "text-sm text-gray-700" }, description)
+      errorMessage && /* @__PURE__ */ React13.createElement(InputError, null, errorMessage),
+      description && /* @__PURE__ */ React13.createElement("div", { className: "text-sm text-gray-700" }, description)
     )
   );
 }
@@ -3434,10 +3798,10 @@ function TagGroupItem({
     idleColor = "gray",
     idleVariant = "outline",
     autoColor
-  } = React36.useContext(TagGroupVariantContext);
+  } = React13.useContext(TagGroupVariantContext);
   const resolvedActive = activeColor ?? theme?.color ?? "gray";
   const tv = textValue ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Tag$1,
     {
       ...props,
@@ -3445,7 +3809,7 @@ function TagGroupItem({
       render: (domProps, { isSelected }) => {
         const color = autoColor ? getRandomColor(String(tv ?? "")) : isSelected ? resolvedActive : idleColor;
         const variant = isSelected ? activeVariant : idleVariant;
-        return /* @__PURE__ */ React36.createElement(
+        return /* @__PURE__ */ React13.createElement(
           "div",
           {
             ...domProps,
@@ -3470,7 +3834,7 @@ function ColorPicker({
   className,
   style
 }) {
-  const [colorSpace, setColorSpace] = React36.useState("hex");
+  const [colorSpace, setColorSpace] = React13.useState("hex");
   const [color, setColor] = useControlledState(
     colorProp,
     parseColor("#BB66CC").toFormat("hsla"),
@@ -3490,13 +3854,13 @@ function ColorPicker({
   const [h, s, l] = color.getColorChannels();
   const rgbaColor = color.toFormat("rgba");
   const [r, g, b] = rgbaColor.getColorChannels();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       className: cn("flex flex-col gap-3", className, classNames?.wrapper),
       style: { width: 240, ...style, ...styles?.wrapper }
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       ColorArea,
       {
         onChange: handleChange,
@@ -3507,7 +3871,7 @@ function ColorPicker({
         style: { width: "100%", height: 140 }
       }
     ),
-    /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-3", style: { padding: 8 } }, /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-3", style: { padding: 8 } }, /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React13.createElement(
       ColorSlider,
       {
         value: color,
@@ -3515,7 +3879,7 @@ function ColorPicker({
         onChangeEnd: handleChange,
         channel: h
       }
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       ColorSlider,
       {
         value: color,
@@ -3523,7 +3887,7 @@ function ColorPicker({
         onChangeEnd: handleChange,
         channel: "alpha"
       }
-    )), /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React36.createElement("div", { className: "flex gap-1", style: { width: "100%" } }, colorSpace === "hex" && /* @__PURE__ */ React36.createElement(Space, { style: { gap: 3 }, compact: true }, /* @__PURE__ */ React36.createElement(
+    )), /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React13.createElement("div", { className: "flex gap-1", style: { width: "100%" } }, colorSpace === "hex" && /* @__PURE__ */ React13.createElement(Space, { style: { gap: 3 }, compact: true }, /* @__PURE__ */ React13.createElement(
       ColorField,
       {
         value: color,
@@ -3533,7 +3897,7 @@ function ColorPicker({
         appearance: "filled",
         placeholder: "Add a color"
       }
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       NumberInput,
       {
         onChange: (n) => setAlpha(n),
@@ -3547,28 +3911,28 @@ function ColorPicker({
         style: { width: "40%" },
         appearance: "filled"
       }
-    )), ["rgb", "hsl"].includes(colorSpace) && /* @__PURE__ */ React36.createElement(Space, { style: { gap: 3 }, compact: true }, /* @__PURE__ */ React36.createElement(
+    )), ["rgb", "hsl"].includes(colorSpace) && /* @__PURE__ */ React13.createElement(Space, { style: { gap: 3 }, compact: true }, /* @__PURE__ */ React13.createElement(
       NumberInput,
       {
         value: colorSpace === "rgb" ? rgbaColor.getChannelValue(r) : color.getChannelValue(h),
         appearance: "filled",
         size: "sm"
       }
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       NumberInput,
       {
         value: colorSpace === "rgb" ? rgbaColor.getChannelValue(g) : color.getChannelValue(s),
         appearance: "filled",
         size: "sm"
       }
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       NumberInput,
       {
         value: colorSpace === "rgb" ? rgbaColor.getChannelValue(b) : color.getChannelValue(l),
         appearance: "filled",
         size: "sm"
       }
-    ), /* @__PURE__ */ React36.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       NumberInput,
       {
         formatOptions: {
@@ -3579,12 +3943,12 @@ function ColorPicker({
         appearance: "filled",
         size: "sm"
       }
-    )), /* @__PURE__ */ React36.createElement(
+    )), /* @__PURE__ */ React13.createElement(
       Select,
       {
         style: { width: "60%" },
         valueKey: "id",
-        onChange: (v) => setColorSpace(v.target.value ?? colorSpace),
+        onChange: (v) => setColorSpace(v ?? colorSpace),
         showSelectionIndicator: false,
         value: colorSpace,
         size: "sm",
@@ -3594,7 +3958,7 @@ function ColorPicker({
           id: o
         }))
       }
-    )), /* @__PURE__ */ React36.createElement(Separator, { color: "gray" }), /* @__PURE__ */ React36.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React36.createElement(
+    )), /* @__PURE__ */ React13.createElement(Separator, { color: "gray" }), /* @__PURE__ */ React13.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React13.createElement(
       ColorSwatchPicker,
       {
         styles: {
@@ -3647,7 +4011,7 @@ function ColorArea({
   ...props
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ColorArea$1,
     {
       ...props,
@@ -3659,7 +4023,7 @@ function ColorArea({
         ...style
       })
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       ColorThumb,
       {
         className: cn("prt-color-area-thumb", classNames?.thumb),
@@ -3689,14 +4053,14 @@ function ColorField({
   placeholder,
   ...colorFieldProps
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ColorField$1,
     {
       ...colorFieldProps,
       isInvalid: !!error,
       "aria-label": colorFieldProps["aria-label"] ?? "color-field"
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(
       Field,
       {
         className,
@@ -3715,7 +4079,7 @@ function ColorField({
         appearance,
         validationStatus
       },
-      /* @__PURE__ */ React36.createElement(
+      /* @__PURE__ */ React13.createElement(
         Input$1,
         {
           ref: inputRef,
@@ -3740,7 +4104,7 @@ function ColorSwatchPicker({
   styles,
   ...props
 }) {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ColorSwatchPicker$1,
     {
       ...props,
@@ -3749,7 +4113,7 @@ function ColorSwatchPicker({
       className: cn("prt-color-swatch-picker", className, classNames?.wrapper),
       style: { ...style, ...styles?.wrapper }
     },
-    colors.map((option) => /* @__PURE__ */ React36.createElement(
+    colors.map((option) => /* @__PURE__ */ React13.createElement(
       ColorSwatchPickerItem,
       {
         key: option.key ?? option.color,
@@ -3757,18 +4121,18 @@ function ColorSwatchPicker({
         className: cn("prt-color-swatch-item", classNames?.swatch),
         style: styles?.swatch
       },
-      /* @__PURE__ */ React36.createElement(ColorSwatch, { className: "prt-color-swatch" })
+      /* @__PURE__ */ React13.createElement(ColorSwatch, { className: "prt-color-swatch" })
     ))
   );
 }
 function ColorSlider({ label, ...props }) {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ColorSlider$1,
     {
       ...props,
       "aria-label": props["aria-label"] ?? "color-slider"
     },
-    /* @__PURE__ */ React36.createElement(Field, { label, className: "prt-color-slider", replaceDefaultControlWrapper: true }, /* @__PURE__ */ React36.createElement(SliderTrack, { className: "prt-color-slider-track" }, /* @__PURE__ */ React36.createElement("div", { className: "prt-color-slider-checkers" }), /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(Field, { label, className: "prt-color-slider", replaceDefaultControlWrapper: true }, /* @__PURE__ */ React13.createElement(SliderTrack, { className: "prt-color-slider-track" }, /* @__PURE__ */ React13.createElement("div", { className: "prt-color-slider-checkers" }), /* @__PURE__ */ React13.createElement(
       ColorThumb,
       {
         className: "prt-color-slider-thumb",
@@ -3806,7 +4170,7 @@ function ToggleGroup({
   styles,
   children
 }) {
-  const groupDefaults = React36.useMemo(
+  const groupDefaults = React13.useMemo(
     () => ({ idleColor, idleVariant, activeColor, activeVariant, size, radius }),
     [idleColor, idleVariant, activeColor, activeVariant, size, radius]
   );
@@ -3816,7 +4180,7 @@ function ToggleGroup({
       selectionMode === "multiple" ? arr : arr[0] ?? ""
     );
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ToggleButtonGroup,
     {
       "aria-label": label,
@@ -3827,7 +4191,7 @@ function ToggleGroup({
       disallowEmptySelection: disallowEmptySelection ?? selectionMode === "single",
       orientation
     },
-    /* @__PURE__ */ React36.createElement(ToggleButtonGroupContext.Provider, { value: groupDefaults }, /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React13.createElement(ToggleButtonGroupContext.Provider, { value: groupDefaults }, /* @__PURE__ */ React13.createElement(
       Space,
       {
         compact,
@@ -3842,9 +4206,591 @@ function ToggleGroup({
   );
 }
 function Toggle({ value, ...props }) {
-  return /* @__PURE__ */ React36.createElement(ToggleButton, { id: value, ...props });
+  return /* @__PURE__ */ React13.createElement(ToggleButton, { id: value, ...props });
+}
+var DEFAULT_TIMEOUT = 4e3;
+var ALL_POSITIONS = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+];
+var VARIANT_COLOR = {
+  success: "success",
+  error: "critical",
+  warning: "warning",
+  info: "info"
+};
+function createQueue() {
+  return new UNSTABLE_ToastQueue({
+    maxVisibleToasts: 5,
+    wrapUpdate(fn) {
+      flushSync(fn);
+    }
+  });
+}
+var queues = {
+  "top-left": createQueue(),
+  "top-center": createQueue(),
+  "top-right": createQueue(),
+  "bottom-left": createQueue(),
+  "bottom-center": createQueue(),
+  "bottom-right": createQueue()
+};
+var defaultPosition = "top-right";
+function resolveTimeout(duration) {
+  if (duration == null) return DEFAULT_TIMEOUT;
+  if (!Number.isFinite(duration) || duration <= 0) return void 0;
+  return duration;
+}
+function ToastIcon({ variant }) {
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ React13.createElement(HiOutlineCheckCircle, { className: "prt-toast-icon", size: 20 });
+    case "error":
+    case "warning":
+      return /* @__PURE__ */ React13.createElement(HiOutlineExclamationCircle, { className: "prt-toast-icon", size: 20 });
+    case "info":
+      return /* @__PURE__ */ React13.createElement(HiOutlineInformationCircle, { className: "prt-toast-icon", size: 20 });
+    default:
+      return null;
+  }
+}
+function ToastItem({
+  toast: toast2,
+  queue,
+  position
+}) {
+  const content = toast2.content;
+  const viewTransitionName = toast2.key;
+  if (content.kind === "custom") {
+    return /* @__PURE__ */ React13.createElement(
+      UNSTABLE_Toast,
+      {
+        toast: toast2,
+        className: "prt-toast",
+        "data-position": position,
+        style: { viewTransitionName }
+      },
+      content.render({ close: () => queue.close(toast2.key) })
+    );
+  }
+  const { variant, title, description, action, cancel } = content;
+  const color = variant === "default" ? void 0 : VARIANT_COLOR[variant];
+  return /* @__PURE__ */ React13.createElement(
+    UNSTABLE_Toast,
+    {
+      toast: toast2,
+      className: "prt-toast",
+      "data-color": color,
+      "data-position": position,
+      style: { viewTransitionName }
+    },
+    /* @__PURE__ */ React13.createElement(UNSTABLE_ToastContent, { className: "prt-toast-content" }, /* @__PURE__ */ React13.createElement(ToastIcon, { variant }), /* @__PURE__ */ React13.createElement("div", { className: "prt-toast-body" }, /* @__PURE__ */ React13.createElement(Text$1, { slot: "title", className: "prt-toast-title" }, title), description && /* @__PURE__ */ React13.createElement(Text$1, { slot: "description", className: "prt-toast-description" }, description), (action || cancel) && /* @__PURE__ */ React13.createElement("div", { className: "prt-toast-actions" }, action && /* @__PURE__ */ React13.createElement(
+      Button,
+      {
+        size: "xs",
+        color: "primary",
+        variant: "solid",
+        onPress: () => {
+          action.onClick();
+          queue.close(toast2.key);
+        }
+      },
+      action.label
+    ), cancel && /* @__PURE__ */ React13.createElement(
+      Button,
+      {
+        size: "xs",
+        color: "gray",
+        variant: "outline",
+        onPress: () => {
+          cancel.onClick();
+          queue.close(toast2.key);
+        }
+      },
+      cancel.label
+    )))),
+    /* @__PURE__ */ React13.createElement(
+      IconButton,
+      {
+        slot: "close",
+        "aria-label": "Close",
+        size: "xs",
+        variant: "ghost",
+        color: "gray",
+        className: "prt-toast-close"
+      },
+      /* @__PURE__ */ React13.createElement(HiX, { size: 16 })
+    )
+  );
+}
+function ToastRegion({ position = "top-right" }) {
+  React13.useEffect(() => {
+    defaultPosition = position;
+  }, [position]);
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, ALL_POSITIONS.map((pos) => /* @__PURE__ */ React13.createElement(
+    UNSTABLE_ToastRegion,
+    {
+      key: pos,
+      queue: queues[pos],
+      "data-position": pos,
+      className: cn("prt-toast-region", `prt-toast-region-${pos}`)
+    },
+    ({ toast: toast2 }) => /* @__PURE__ */ React13.createElement(ToastItem, { toast: toast2, queue: queues[pos], position: pos })
+  )));
+}
+function addToast(variant, title, options) {
+  const position = options?.position ?? defaultPosition;
+  return queues[position].add(
+    {
+      kind: "standard",
+      variant,
+      title,
+      description: options?.description,
+      action: options?.action,
+      cancel: options?.cancel
+    },
+    { timeout: resolveTimeout(options?.duration) }
+  );
+}
+function toast(title, options) {
+  return addToast("default", title, options);
+}
+toast.success = function(title, options) {
+  return addToast("success", title, options);
+};
+toast.error = function(title, options) {
+  return addToast("error", title, options);
+};
+toast.warning = function(title, options) {
+  return addToast("warning", title, options);
+};
+toast.info = function(title, options) {
+  return addToast("info", title, options);
+};
+toast.custom = function(render, options) {
+  const position = options?.position ?? defaultPosition;
+  return queues[position].add(
+    { kind: "custom", render },
+    { timeout: resolveTimeout(options?.duration) }
+  );
+};
+toast.dismiss = function(key) {
+  for (const pos of ALL_POSITIONS) queues[pos].close(key);
+};
+function Tooltip({
+  content,
+  children,
+  delay = 600,
+  closeDelay,
+  isDisabled,
+  showArrow = true,
+  placement = "top",
+  offset = 8,
+  className,
+  classNames,
+  style,
+  styles,
+  ...props
+}) {
+  return /* @__PURE__ */ React13.createElement(TooltipTrigger, { delay, closeDelay, isDisabled }, children, /* @__PURE__ */ React13.createElement(
+    Tooltip$1,
+    {
+      ...props,
+      placement,
+      offset,
+      className: cn("prt-tooltip", className, classNames?.tooltip),
+      style: { ...style, ...styles?.tooltip }
+    },
+    showArrow && /* @__PURE__ */ React13.createElement(OverlayArrow, { className: "prt-tooltip-arrow" }, /* @__PURE__ */ React13.createElement("svg", { width: "10", height: "5", viewBox: "0 0 10 5", "aria-hidden": "true" }, /* @__PURE__ */ React13.createElement("path", { d: "M0 0 L5 5 L10 0 Z" }))),
+    content
+  ));
+}
+function HoverCard({
+  children,
+  content,
+  openDelay = 300,
+  closeDelay = 200,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  offset = 10,
+  placement = "bottom",
+  className,
+  classNames,
+  style,
+  styles,
+  ...props
+}) {
+  const theme = useTheme();
+  const triggerRef = React13.useRef(null);
+  const state = useOverlayTriggerState({ isOpen, defaultOpen, onOpenChange });
+  const openTimer = React13.useRef(null);
+  const closeTimer = React13.useRef(null);
+  function clearTimers() {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }
+  function scheduleOpen() {
+    clearTimers();
+    if (isDisabled) return;
+    openTimer.current = setTimeout(() => state.open(), openDelay);
+  }
+  function scheduleClose() {
+    clearTimers();
+    closeTimer.current = setTimeout(() => state.close(), closeDelay);
+  }
+  function openNow() {
+    clearTimers();
+    if (!isDisabled) state.open();
+  }
+  function keepOpen() {
+    clearTimers();
+  }
+  React13.useEffect(() => clearTimers, []);
+  const { hoverProps: triggerHover } = useHover({
+    isDisabled,
+    onHoverStart: scheduleOpen,
+    onHoverEnd: scheduleClose
+  });
+  const { focusWithinProps: triggerFocus } = useFocusWithin({
+    isDisabled,
+    onFocusWithin: openNow,
+    onBlurWithin: scheduleClose
+  });
+  const { hoverProps: contentHover } = useHover({
+    onHoverStart: keepOpen,
+    onHoverEnd: scheduleClose
+  });
+  const { focusWithinProps: contentFocus } = useFocusWithin({
+    onFocusWithin: keepOpen,
+    onBlurWithin: scheduleClose
+  });
+  const trigger = React13.cloneElement(children, {
+    ...mergeProps(
+      children.props,
+      triggerHover,
+      triggerFocus
+    ),
+    ref: triggerRef
+  });
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, trigger, /* @__PURE__ */ React13.createElement(
+    Popover$1,
+    {
+      ...props,
+      triggerRef,
+      isOpen: state.isOpen,
+      onOpenChange: state.setOpen,
+      isNonModal: true,
+      offset,
+      placement,
+      "data-color": theme?.color,
+      "data-radius": theme?.radius,
+      className: cn("prt-popover", classNames?.popover),
+      style: styles?.popover
+    },
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        ...mergeProps(contentHover, contentFocus),
+        className: cn("prt-popover-content", className, classNames?.content),
+        style: { ...style, ...styles?.content }
+      },
+      content
+    )
+  ));
+}
+function isEmpty(value) {
+  if (value === null || value === void 0) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+}
+function cleanErrors(fields) {
+  const errors = {};
+  for (const key of Object.keys(fields)) errors[key] = null;
+  return errors;
+}
+function cleanTouched(fields) {
+  const touched = {};
+  for (const key of Object.keys(fields)) touched[key] = false;
+  return touched;
+}
+function useForm({
+  fields: defaultFields,
+  validators,
+  optional = [],
+  resetKey
+}) {
+  const [values, setValues] = React13.useState(defaultFields);
+  const [errors, setErrors] = React13.useState(
+    () => cleanErrors(defaultFields)
+  );
+  const [touched, setTouched] = React13.useState(
+    () => cleanTouched(defaultFields)
+  );
+  const [isSubmitting, setIsSubmitting] = React13.useState(false);
+  const valuesRef = React13.useRef(values);
+  valuesRef.current = values;
+  const touchedRef = React13.useRef(touched);
+  touchedRef.current = touched;
+  const isSubmittingRef = React13.useRef(false);
+  const fieldsRef = React13.useRef(defaultFields);
+  fieldsRef.current = defaultFields;
+  const resetKeyRef = React13.useRef(resetKey);
+  React13.useEffect(() => {
+    if (resetKey !== void 0 && resetKey !== resetKeyRef.current) {
+      resetKeyRef.current = resetKey;
+      setValues(fieldsRef.current);
+      setErrors(cleanErrors(fieldsRef.current));
+      setTouched(cleanTouched(fieldsRef.current));
+      setIsSubmitting(false);
+      isSubmittingRef.current = false;
+    }
+  }, [resetKey]);
+  const validateField = React13.useCallback(
+    (fieldName, value, currentValues) => {
+      const validator = validators?.[fieldName];
+      if (validator) return validator(value, currentValues);
+      if (!optional.includes(fieldName) && isEmpty(value)) {
+        return "This field is required";
+      }
+      return null;
+    },
+    [validators, optional]
+  );
+  function onChange(fieldName, value) {
+    const next = { ...valuesRef.current, [fieldName]: value };
+    setValues(next);
+    setTouched((prev) => ({ ...prev, [fieldName]: true }));
+    setErrors((prev) => {
+      const nextErrors = { ...prev };
+      nextErrors[fieldName] = validateField(fieldName, value, next);
+      for (const field of Object.keys(prev)) {
+        if (field !== fieldName && touchedRef.current[field]) {
+          nextErrors[field] = validateField(field, next[field], next);
+        }
+      }
+      return nextErrors;
+    });
+  }
+  function visibleError(fieldName) {
+    return touched[fieldName] ? errors[fieldName] : null;
+  }
+  function getFieldProps(fieldName) {
+    return {
+      name: String(fieldName),
+      value: values[fieldName] ?? "",
+      onChange: (value) => onChange(fieldName, value),
+      error: visibleError(fieldName)
+    };
+  }
+  function getNumberFieldProps(fieldName) {
+    return {
+      name: String(fieldName),
+      value: values[fieldName] ?? Number.NaN,
+      onChange: (value) => onChange(fieldName, value),
+      error: visibleError(fieldName)
+    };
+  }
+  function getSelectProps(fieldName) {
+    return {
+      name: String(fieldName),
+      value: values[fieldName] ?? null,
+      onChange: (value) => onChange(fieldName, value ?? ""),
+      error: visibleError(fieldName)
+    };
+  }
+  function getCheckboxGroupProps(fieldName) {
+    return {
+      name: String(fieldName),
+      value: values[fieldName] ?? [],
+      onChange: (value) => onChange(fieldName, value),
+      errorMessage: visibleError(fieldName)
+    };
+  }
+  function getRadioGroupProps(fieldName) {
+    return {
+      name: String(fieldName),
+      value: values[fieldName] ?? "",
+      onChange: (value) => onChange(fieldName, value),
+      errorMessage: visibleError(fieldName)
+    };
+  }
+  function getSwitchProps(fieldName) {
+    return {
+      name: String(fieldName),
+      isSelected: Boolean(values[fieldName]),
+      onChange: (value) => onChange(fieldName, value)
+    };
+  }
+  function validateAll() {
+    const current = valuesRef.current;
+    const allErrors = {};
+    const allTouched = {};
+    for (const field of Object.keys(current)) {
+      allErrors[field] = validateField(field, current[field], current);
+      allTouched[field] = true;
+    }
+    setErrors(allErrors);
+    setTouched(allTouched);
+    return allErrors;
+  }
+  function handleSubmit(callback) {
+    return (e) => {
+      e.preventDefault();
+      if (isSubmittingRef.current) return;
+      const allErrors = validateAll();
+      const hasErrors = Object.values(allErrors).some((error) => error !== null);
+      if (hasErrors) return;
+      const result = callback(valuesRef.current);
+      if (result instanceof Promise) {
+        isSubmittingRef.current = true;
+        setIsSubmitting(true);
+        result.finally(() => {
+          isSubmittingRef.current = false;
+          setIsSubmitting(false);
+        });
+      }
+    };
+  }
+  function isValid() {
+    const current = valuesRef.current;
+    for (const field of Object.keys(current)) {
+      if (validateField(field, current[field], current) !== null) return false;
+    }
+    return true;
+  }
+  const isDirty = React13.useMemo(() => {
+    for (const field of Object.keys(defaultFields)) {
+      if (values[field] !== defaultFields[field]) return true;
+    }
+    return false;
+  }, [values, defaultFields]);
+  function reset() {
+    setValues(fieldsRef.current);
+    setErrors(cleanErrors(fieldsRef.current));
+    setTouched(cleanTouched(fieldsRef.current));
+    setIsSubmitting(false);
+    isSubmittingRef.current = false;
+  }
+  function setFieldValues(newValues) {
+    const next = { ...valuesRef.current, ...newValues };
+    setValues(next);
+    setErrors((prev) => {
+      const nextErrors = { ...prev };
+      for (const field of Object.keys(newValues)) {
+        nextErrors[field] = validateField(field, next[field], next);
+      }
+      return nextErrors;
+    });
+    setTouched((prev) => {
+      const nextTouched = { ...prev };
+      for (const field of Object.keys(newValues)) {
+        nextTouched[field] = true;
+      }
+      return nextTouched;
+    });
+  }
+  function setFieldError(fieldName, error) {
+    setErrors((prev) => ({ ...prev, [fieldName]: error }));
+    setTouched((prev) => ({ ...prev, [fieldName]: true }));
+  }
+  return {
+    values,
+    errors,
+    touched,
+    isDirty,
+    isSubmitting,
+    setIsSubmitting,
+    onChange,
+    getFieldProps,
+    getNumberFieldProps,
+    getSelectProps,
+    getCheckboxGroupProps,
+    getRadioGroupProps,
+    getSwitchProps,
+    handleSubmit,
+    isValid,
+    reset,
+    validateAll,
+    setFieldValues,
+    setFieldError
+  };
+}
+
+// src/hooks/validators.ts
+function required(message) {
+  return function(value) {
+    if (value === "" || value === null || value === void 0) {
+      return message ?? "This field is required";
+    }
+    if (typeof value === "string" && value.trim() === "") {
+      return message ?? "This field is required";
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return message ?? "This field is required";
+    }
+    return null;
+  };
+}
+function email(message) {
+  return function(value) {
+    if (!value) return null;
+    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value));
+    return valid ? null : message ?? "Invalid email address";
+  };
+}
+function minLength(length, message) {
+  return function(value) {
+    if (!value) return null;
+    return String(value).length >= length ? null : message ?? `Must be at least ${length} characters`;
+  };
+}
+function maxLength(length, message) {
+  return function(value) {
+    if (!value) return null;
+    return String(value).length <= length ? null : message ?? `Must be at most ${length} characters`;
+  };
+}
+function min(n, message) {
+  return function(value) {
+    if (value === null || value === void 0 || value === "") return null;
+    return Number(value) >= n ? null : message ?? `Must be at least ${n}`;
+  };
+}
+function max(n, message) {
+  return function(value) {
+    if (value === null || value === void 0 || value === "") return null;
+    return Number(value) <= n ? null : message ?? `Must be at most ${n}`;
+  };
+}
+function pattern(regex, message) {
+  return function(value) {
+    if (!value) return null;
+    return regex.test(String(value)) ? null : message ?? "Invalid format";
+  };
+}
+function matches(fieldName, message) {
+  return function(value, values) {
+    if (!value) return null;
+    return value === values[fieldName] ? null : message ?? `Must match ${fieldName}`;
+  };
+}
+function compose(...fns) {
+  return function(value, values) {
+    for (const fn of fns) {
+      const error = fn(value, values);
+      if (error) return error;
+    }
+    return null;
+  };
 }
 
-export { Avatar, AvatarGroup, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, DateField, DatePicker, DateRangePicker, FileUploader, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, NumberInput, ListBoxItem as Option, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, Toggle, ToggleButton, ToggleGroup, parseColor2 as parseColor, useModal, useTheme };
+export { Avatar, AvatarGroup, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, DateField, DatePicker, DateRangePicker, FileUploader, HoverCard, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, ModalProvider, NumberInput, ListBoxItem as Option, PinInput, PinInputGroup, PinInputSeparator, PinInputSlot, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, ToastRegion, Toggle, ToggleButton, ToggleGroup, Tooltip, compose, email, matches, max, maxLength, min, minLength, parseColor2 as parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map