@parrot-co/parrot-ui 0.0.66 → 0.0.68

package/dist/module.js

@@ -2,9 +2,9 @@ import {createStitches as $kF5Av$createStitches} from "@stitches/react";
 import {gray as $kF5Av$gray, mauve as $kF5Av$mauve, slate as $kF5Av$slate, sage as $kF5Av$sage, olive as $kF5Av$olive, sand as $kF5Av$sand, tomato as $kF5Av$tomato, red as $kF5Av$red, crimson as $kF5Av$crimson, pink as $kF5Av$pink, plum as $kF5Av$plum, purple as $kF5Av$purple, violet as $kF5Av$violet, indigo as $kF5Av$indigo, blue as $kF5Av$blue, sky as $kF5Av$sky, mint as $kF5Av$mint, cyan as $kF5Av$cyan, teal as $kF5Av$teal, green as $kF5Av$green, grass as $kF5Av$grass, lime as $kF5Av$lime, yellow as $kF5Av$yellow, amber as $kF5Av$amber, orange as $kF5Av$orange, brown as $kF5Av$brown, bronze as $kF5Av$bronze, gold as $kF5Av$gold, grayA as $kF5Av$grayA, mauveA as $kF5Av$mauveA, slateA as $kF5Av$slateA, sageA as $kF5Av$sageA, oliveA as $kF5Av$oliveA, sandA as $kF5Av$sandA, tomatoA as $kF5Av$tomatoA, redA as $kF5Av$redA, crimsonA as $kF5Av$crimsonA, pinkA as $kF5Av$pinkA, plumA as $kF5Av$plumA, purpleA as $kF5Av$purpleA, violetA as $kF5Av$violetA, indigoA as $kF5Av$indigoA, blueA as $kF5Av$blueA, skyA as $kF5Av$skyA, mintA as $kF5Av$mintA, cyanA as $kF5Av$cyanA, tealA as $kF5Av$tealA, greenA as $kF5Av$greenA, grassA as $kF5Av$grassA, limeA as $kF5Av$limeA, yellowA as $kF5Av$yellowA, amberA as $kF5Av$amberA, orangeA as $kF5Av$orangeA, brownA as $kF5Av$brownA, bronzeA as $kF5Av$bronzeA, goldA as $kF5Av$goldA, whiteA as $kF5Av$whiteA, blackA as $kF5Av$blackA} from "@radix-ui/colors";
 import {jsxs as $kF5Av$jsxs, jsx as $kF5Av$jsx, Fragment as $kF5Av$Fragment} from "react/jsx-runtime";
 import $kF5Av$react, {forwardRef as $kF5Av$forwardRef, useRef as $kF5Av$useRef, useContext as $kF5Av$useContext, useMemo as $kF5Av$useMemo, useState as $kF5Av$useState, useEffect as $kF5Av$useEffect, cloneElement as $kF5Av$cloneElement} from "react";
-import {useTextField as $kF5Av$useTextField, useLocale as $kF5Av$useLocale, useNumberField as $kF5Av$useNumberField, useButton as $kF5Av$useButton, useCheckbox as $kF5Av$useCheckbox, useCheckboxGroupItem as $kF5Av$useCheckboxGroupItem, useFocusRing as $kF5Av$useFocusRing, VisuallyHidden as $kF5Av$VisuallyHidden, useCheckboxGroup as $kF5Av$useCheckboxGroup, useRadio as $kF5Av$useRadio, useRadioGroup as $kF5Av$useRadioGroup, useSelect as $kF5Av$useSelect, HiddenSelect as $kF5Av$HiddenSelect, mergeProps as $kF5Av$mergeProps, useListBox as $kF5Av$useListBox, useOption as $kF5Av$useOption, useListBoxSection as $kF5Av$useListBoxSection, useSeparator as $kF5Av$useSeparator, usePopover as $kF5Av$usePopover, Overlay as $kF5Av$Overlay, useDatePicker as $kF5Av$useDatePicker, useDateField as $kF5Av$useDateField, useDateSegment as $kF5Av$useDateSegment, useCalendar as $kF5Av$useCalendar, useCalendarGrid as $kF5Av$useCalendarGrid, useCalendarCell as $kF5Av$useCalendarCell, useDrop as $kF5Av$useDrop, useProgressBar as $kF5Av$useProgressBar, useTabList as $kF5Av$useTabList, useTab as $kF5Av$useTab, useTabPanel as $kF5Av$useTabPanel, useHover as $kF5Av$useHover, usePress as $kF5Av$usePress, useSwitch as $kF5Av$useSwitch, useMenuTrigger as $kF5Av$useMenuTrigger, useMenu as $kF5Av$useMenu, useMenuSection as $kF5Av$useMenuSection, useMenuItem as $kF5Av$useMenuItem} from "react-aria";
-import {HiChevronUp as $kF5Av$HiChevronUp, HiChevronDown as $kF5Av$HiChevronDown, HiSelector as $kF5Av$HiSelector, HiOutlineCalendar as $kF5Av$HiOutlineCalendar, HiChevronLeft as $kF5Av$HiChevronLeft, HiChevronRight as $kF5Av$HiChevronRight, HiOutlineDocumentAdd as $kF5Av$HiOutlineDocumentAdd, HiOutlineCheckCircle as $kF5Av$HiOutlineCheckCircle, HiOutlineTrash as $kF5Av$HiOutlineTrash, HiOutlineExclamationCircle as $kF5Av$HiOutlineExclamationCircle, HiOutlineRefresh as $kF5Av$HiOutlineRefresh, HiOutlinePaperClip as $kF5Av$HiOutlinePaperClip, HiCheck as $kF5Av$HiCheck, HiOutlineGlobe as $kF5Av$HiOutlineGlobe, HiOutlineCurrencyDollar as $kF5Av$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $kF5Av$HiOutlineGlobeAlt, HiOutlineArchive as $kF5Av$HiOutlineArchive, HiOutlineAnnotation as $kF5Av$HiOutlineAnnotation, HiOutlineFire as $kF5Av$HiOutlineFire, HiOutlineBadgeCheck as $kF5Av$HiOutlineBadgeCheck, HiOutlineSparkles as $kF5Av$HiOutlineSparkles, HiOutlineSpeakerphone as $kF5Av$HiOutlineSpeakerphone, HiOutlineCreditCard as $kF5Av$HiOutlineCreditCard, HiOutlineHeart as $kF5Av$HiOutlineHeart, HiOutlineLocationMarker as $kF5Av$HiOutlineLocationMarker, HiOutlineCursorClick as $kF5Av$HiOutlineCursorClick, HiOutlineLightningBolt as $kF5Av$HiOutlineLightningBolt, HiOutlineDocumentDownload as $kF5Av$HiOutlineDocumentDownload, HiOutlineTag as $kF5Av$HiOutlineTag, HiOutlineAtSymbol as $kF5Av$HiOutlineAtSymbol, HiOutlineUserCircle as $kF5Av$HiOutlineUserCircle, HiOutlineTerminal as $kF5Av$HiOutlineTerminal, HiOutlineMoon as $kF5Av$HiOutlineMoon} from "react-icons/hi";
-import {useNumberFieldState as $kF5Av$useNumberFieldState, useToggleState as $kF5Av$useToggleState, useCheckboxGroupState as $kF5Av$useCheckboxGroupState, useRadioGroupState as $kF5Av$useRadioGroupState, useSelectState as $kF5Av$useSelectState, Item as $kF5Av$Item, useListState as $kF5Av$useListState, useDatePickerState as $kF5Av$useDatePickerState, useDateFieldState as $kF5Av$useDateFieldState, useCalendarState as $kF5Av$useCalendarState, useTabListState as $kF5Av$useTabListState, useMenuTriggerState as $kF5Av$useMenuTriggerState, useTreeState as $kF5Av$useTreeState} from "react-stately";
+import {useTextField as $kF5Av$useTextField, useLocale as $kF5Av$useLocale, useNumberField as $kF5Av$useNumberField, useButton as $kF5Av$useButton, useCheckbox as $kF5Av$useCheckbox, useCheckboxGroupItem as $kF5Av$useCheckboxGroupItem, useFocusRing as $kF5Av$useFocusRing, VisuallyHidden as $kF5Av$VisuallyHidden, useCheckboxGroup as $kF5Av$useCheckboxGroup, useRadio as $kF5Av$useRadio, useRadioGroup as $kF5Av$useRadioGroup, useSelect as $kF5Av$useSelect, HiddenSelect as $kF5Av$HiddenSelect, mergeProps as $kF5Av$mergeProps, useListBox as $kF5Av$useListBox, useOption as $kF5Av$useOption, useListBoxSection as $kF5Av$useListBoxSection, useSeparator as $kF5Av$useSeparator, usePopover as $kF5Av$usePopover, Overlay as $kF5Av$Overlay, useDatePicker as $kF5Av$useDatePicker, useDateField as $kF5Av$useDateField, useDateSegment as $kF5Av$useDateSegment, useCalendar as $kF5Av$useCalendar, useCalendarGrid as $kF5Av$useCalendarGrid, useCalendarCell as $kF5Av$useCalendarCell, useDrop as $kF5Av$useDrop, useProgressBar as $kF5Av$useProgressBar, useTabList as $kF5Av$useTabList, useTab as $kF5Av$useTab, useTabPanel as $kF5Av$useTabPanel, useHover as $kF5Av$useHover, usePress as $kF5Av$usePress, useSwitch as $kF5Av$useSwitch, useMenuTrigger as $kF5Av$useMenuTrigger, useMenu as $kF5Av$useMenu, useMenuSection as $kF5Av$useMenuSection, useMenuItem as $kF5Av$useMenuItem, useTable as $kF5Av$useTable, useTableRowGroup as $kF5Av$useTableRowGroup, useTableHeaderRow as $kF5Av$useTableHeaderRow, useTableColumnHeader as $kF5Av$useTableColumnHeader, useTableRow as $kF5Av$useTableRow, useTableCell as $kF5Av$useTableCell, useTableSelectionCheckbox as $kF5Av$useTableSelectionCheckbox, useTableSelectAllCheckbox as $kF5Av$useTableSelectAllCheckbox, useModalOverlay as $kF5Av$useModalOverlay, useDialog as $kF5Av$useDialog} from "react-aria";
+import {HiChevronUp as $kF5Av$HiChevronUp, HiChevronDown as $kF5Av$HiChevronDown, HiSelector as $kF5Av$HiSelector, HiOutlineCalendar as $kF5Av$HiOutlineCalendar, HiChevronLeft as $kF5Av$HiChevronLeft, HiChevronRight as $kF5Av$HiChevronRight, HiOutlineDocumentAdd as $kF5Av$HiOutlineDocumentAdd, HiOutlineCheckCircle as $kF5Av$HiOutlineCheckCircle, HiOutlineTrash as $kF5Av$HiOutlineTrash, HiOutlineExclamationCircle as $kF5Av$HiOutlineExclamationCircle, HiOutlineRefresh as $kF5Av$HiOutlineRefresh, HiOutlinePaperClip as $kF5Av$HiOutlinePaperClip, HiCheck as $kF5Av$HiCheck, HiOutlineGlobe as $kF5Av$HiOutlineGlobe, HiOutlineCurrencyDollar as $kF5Av$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $kF5Av$HiOutlineGlobeAlt, HiOutlineArchive as $kF5Av$HiOutlineArchive, HiOutlineAnnotation as $kF5Av$HiOutlineAnnotation, HiOutlineFire as $kF5Av$HiOutlineFire, HiOutlineBadgeCheck as $kF5Av$HiOutlineBadgeCheck, HiOutlineSparkles as $kF5Av$HiOutlineSparkles, HiOutlineSpeakerphone as $kF5Av$HiOutlineSpeakerphone, HiOutlineCreditCard as $kF5Av$HiOutlineCreditCard, HiOutlineHeart as $kF5Av$HiOutlineHeart, HiOutlineLocationMarker as $kF5Av$HiOutlineLocationMarker, HiOutlineCursorClick as $kF5Av$HiOutlineCursorClick, HiOutlineLightningBolt as $kF5Av$HiOutlineLightningBolt, HiOutlineDocumentDownload as $kF5Av$HiOutlineDocumentDownload, HiOutlineTag as $kF5Av$HiOutlineTag, HiOutlineAtSymbol as $kF5Av$HiOutlineAtSymbol, HiOutlineUserCircle as $kF5Av$HiOutlineUserCircle, HiOutlineTerminal as $kF5Av$HiOutlineTerminal, HiOutlineMoon as $kF5Av$HiOutlineMoon, HiSortAscending as $kF5Av$HiSortAscending, HiSortDescending as $kF5Av$HiSortDescending} from "react-icons/hi";
+import {useNumberFieldState as $kF5Av$useNumberFieldState, useToggleState as $kF5Av$useToggleState, useCheckboxGroupState as $kF5Av$useCheckboxGroupState, useRadioGroupState as $kF5Av$useRadioGroupState, useSelectState as $kF5Av$useSelectState, Item as $kF5Av$Item, useListState as $kF5Av$useListState, useDatePickerState as $kF5Av$useDatePickerState, useDateFieldState as $kF5Av$useDateFieldState, useCalendarState as $kF5Av$useCalendarState, useTabListState as $kF5Av$useTabListState, useMenuTriggerState as $kF5Av$useMenuTriggerState, useTreeState as $kF5Av$useTreeState, useTableState as $kF5Av$useTableState, TableHeader as $kF5Av$TableHeader, TableBody as $kF5Av$TableBody, Column as $kF5Av$Column, Row as $kF5Av$Row, Cell as $kF5Av$Cell, useOverlayTriggerState as $kF5Av$useOverlayTriggerState} from "react-stately";
 import {createCalendar as $kF5Av$createCalendar, endOfMonth as $kF5Av$endOfMonth, getWeeksInMonth as $kF5Av$getWeeksInMonth, isSameMonth as $kF5Av$isSameMonth, CalendarDate as $kF5Av$CalendarDate} from "@internationalized/date";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */ 
@@ -69,7 +69,8 @@ const $9ade691eb9e41cfb$export$8f45430ccf837300 = {
     whiteA: $kF5Av$whiteA,
     blackA: $kF5Av$blackA
 };
-const { styled: $9ade691eb9e41cfb$export$3817b7a54a07cec7 , css: $9ade691eb9e41cfb$export$dbf350e5966cf602 , keyframes: $9ade691eb9e41cfb$export$d25ddfdf17c3ad3e , config: $9ade691eb9e41cfb$export$e506a1d27d1eaa20  } = (0, $kF5Av$createStitches)({
+const { styled: $9ade691eb9e41cfb$export$3817b7a54a07cec7 , css: $9ade691eb9e41cfb$export$dbf350e5966cf602 , keyframes: $9ade691eb9e41cfb$export$d25ddfdf17c3ad3e , config: $9ade691eb9e41cfb$export$e506a1d27d1eaa20 , theme: $9ade691eb9e41cfb$export$bca14c5b3b88a9c9  } = (0, $kF5Av$createStitches)({
+    prefix: "parrot-ui",
     theme: {
         colors: {
             ...(0, $kF5Av$gray),
@@ -1032,7 +1033,7 @@ function $22d93d8ad1e2d08d$export$ccdcc3b9d72a654(color, variant) {
             background: "white",
             color: "$gray12",
             fill: "$gray12",
-            border: variant === "outline" ? "1.5px solid $gray5" : "none",
+            border: variant === "plain" ? "none" : "1.5px solid $gray5",
             "&:focus": {
                 boxShadow: $22d93d8ad1e2d08d$export$71074ab0ed740397("violet")
             }
@@ -1478,29 +1479,23 @@ var $19752cc72b827664$export$2e2bcd8739ae039 = $19752cc72b827664$var$InputError;
 
 
 
-
-const $f8db34c11dd03189$var$Socket = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("div", {
+const $f8db34c11dd03189$var$Socket = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("span", {
     display: "flex",
     height: "100%",
+    alignItems: "center",
     variants: {
         side: {
             left: {
-                pl: 8
+                pr: 4
             },
             right: {
-                pr: 8
+                pl: 4
             }
         }
     }
 });
 const $f8db34c11dd03189$var$Sockets = /*#__PURE__*/ (0, $kF5Av$react).forwardRef(({ append: append , prepend: prepend , children: children , ...props }, ref)=>{
-    return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
-        align: "center",
-        justify: "center",
-        gap: 2,
-        stretchX: true,
-        ref: ref,
-        ...props,
+    return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $f8db34c11dd03189$import$867d6c90a4013129$ffb0004e005737fa), {
         children: [
             prepend && /*#__PURE__*/ (0, $kF5Av$jsx)($f8db34c11dd03189$var$Socket, {
                 side: "left",
@@ -2031,6 +2026,9 @@ const $d9dcae15cfac0230$export$b28585a458fee016 = /*#__PURE__*/ (0, $kF5Av$react
         ...props,
         type: showPassword ? "text" : "password",
         append: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $59636f06ede7befa$export$353f5b6fc5456de1), {
+            css: {
+                marginRight: 6
+            },
             variant: "solid",
             color: "white",
             size: "xs",
@@ -2197,10 +2195,17 @@ const $ba191264a9103a53$export$74cd3087fed3724d = (0, $9ade691eb9e41cfb$export$3
     alignItems: "center",
     justifyContent: "center",
     boxSizing: "border-box",
+    "&[data-focused=true]": {
+        boxShadow: "$focusRing"
+    },
     "&[data-checked='true']": {
         background: "$violet10",
         borderColor: "transparent"
     },
+    "&[data-indeterminate=true]": {
+        background: "$gray4",
+        borderColor: "transparent"
+    },
     defaultVariants: {
         size: "sm",
         appearance: "flushed",
@@ -2251,7 +2256,7 @@ const $ba191264a9103a53$export$74cd3087fed3724d = (0, $9ade691eb9e41cfb$export$3
             size: "sm",
             shape: "round",
             css: {
-                borderRadius: 6
+                borderRadius: 4
             }
         },
         {
@@ -2279,13 +2284,12 @@ const $ba191264a9103a53$export$74cd3087fed3724d = (0, $9ade691eb9e41cfb$export$3
 });
 
 
+
 const $b5830f3daeb33bb2$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $kF5Av$react).forwardRef((props, ref)=>{
     const { appearance: appearance , size: size , ...otherProps } = props;
     // check if checkbox is rendered in a group context
     const groupState = (0, $kF5Av$react).useContext((0, $5711a5825d7012d3$export$f9c6924e160136d1));
     const isWithinGroup = groupState != null;
-    // if it is, use the group state to determine the checkbox state
-    // otherwise, use the toggle state hook
     const singleState = (0, $kF5Av$useToggleState)(props);
     const inputRef = (0, $kF5Av$react).useRef(null);
     const single = (0, $kF5Av$useCheckbox)(otherProps, singleState, inputRef);
@@ -2293,7 +2297,7 @@ const $b5830f3daeb33bb2$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $kF5Av$react
     const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $kF5Av$useFocusRing)();
     const inputProps = isWithinGroup ? group?.inputProps : single.inputProps;
     const state = isWithinGroup ? groupState : singleState;
-    const isSelected = isWithinGroup ? groupState.isSelected(props.value) : state.isSelected;
+    const isSelected = isWithinGroup ? groupState.isSelected(props.value ?? "") : state.isSelected;
     return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $ba191264a9103a53$export$eea83358d9434634), {
         "data-disabled": inputProps?.disabled,
         ref: ref,
@@ -2306,27 +2310,39 @@ const $b5830f3daeb33bb2$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $kF5Av$react
                     ...focusProps
                 })
             }),
-            /*#__PURE__*/ (0, $kF5Av$jsx)((0, $ba191264a9103a53$export$74cd3087fed3724d), {
+            /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $ba191264a9103a53$export$74cd3087fed3724d), {
+                "data-focused": isFocusVisible,
                 "aria-hidden": "true",
                 "data-checked": isSelected,
+                "data-indeterminate": props.isIndeterminate,
                 size: size,
                 appearance: appearance,
-                children: /*#__PURE__*/ (0, $kF5Av$jsx)("svg", {
-                    stroke: "white",
-                    width: "0.75rem",
-                    height: "0.75rem",
-                    viewBox: "0 0 18 18",
-                    children: /*#__PURE__*/ (0, $kF5Av$jsx)("polyline", {
-                        points: "1 9 7 14 15 4",
-                        fill: "none",
-                        strokeWidth: 3,
-                        strokeDasharray: 22,
-                        strokeDashoffset: isSelected ? 44 : 66,
-                        style: {
-                            transition: "all 400ms"
+                children: [
+                    isSelected && /*#__PURE__*/ (0, $kF5Av$jsx)("svg", {
+                        stroke: "white",
+                        width: "0.75rem",
+                        height: "0.75rem",
+                        viewBox: "0 0 18 18",
+                        children: /*#__PURE__*/ (0, $kF5Av$jsx)("polyline", {
+                            points: "1 9 7 14 15 4",
+                            fill: "none",
+                            strokeWidth: 3,
+                            strokeDasharray: 22,
+                            strokeDashoffset: isSelected ? 44 : 66,
+                            style: {
+                                transition: "all 400ms"
+                            }
+                        })
+                    }),
+                    props.isIndeterminate && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+                        css: {
+                            background: "$gray11",
+                            width: "70%",
+                            height: 2,
+                            borderRadius: 4
                         }
                     })
-                })
+                ]
             }),
             otherProps.children
         ]
@@ -3385,6 +3401,7 @@ const $bc830feefb2f8a48$export$f7513421c53ce141 = (0, $9ade691eb9e41cfb$export$3
 
 
 
+
 function $0cd1b33af66db866$export$d41d9ab3de2def3d(text) {
     const str = String(text);
     let hash = 0;
@@ -3401,6 +3418,10 @@ function $0cd1b33af66db866$export$d41d9ab3de2def3d(text) {
 function $0cd1b33af66db866$export$d560c7e4a29451c2() {
     return Math.random().toString(36);
 }
+function $0cd1b33af66db866$export$e4369cabd7e84cd9(string) {
+    const hash = $0cd1b33af66db866$export$d41d9ab3de2def3d(string);
+    return (0, $22d93d8ad1e2d08d$export$36308cce1deef340)[hash % (0, $22d93d8ad1e2d08d$export$36308cce1deef340).length];
+}
 
 
 const $2b3b1dc9b2ed8672$export$e2255cf6045e8d47 = /*#__PURE__*/ $kF5Av$forwardRef(({ src: src , alt: alt , name: name , color: color , variant: variant = "light" , fallback: fallback , children: children , ...props }, ref)=>{
@@ -3891,12 +3912,15 @@ const $40e1dcf58e198ee9$export$1aaa3deaa90ea306 = {
 
 
 
-const $b3ab9230425b9da4$export$7a4af5518e2bbe67 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("div", (0, $22d93d8ad1e2d08d$export$5a7eb6284e7684f5), {
+const $b3ab9230425b9da4$export$7a4af5518e2bbe67 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("span", (0, $22d93d8ad1e2d08d$export$5a7eb6284e7684f5), {
+    "$$tag-base-height": "14px",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     fontFamily: "$sans",
     boxSizing: "border-box",
+    lineHeight: 1.2,
+    height: "$$tag-base-height",
     defaultVariants: {
         color: "gray",
         variant: "light",
@@ -3906,135 +3930,59 @@ const $b3ab9230425b9da4$export$7a4af5518e2bbe67 = (0, $9ade691eb9e41cfb$export$3
     variants: {
         size: {
             "3xs": {
-                height: 14,
-                px: 8,
+                "$$tag-base-height": "14px",
+                px: 4,
                 fontSize: 11
             },
             "2xs": {
-                height: 16,
-                px: 8,
+                "$$tag-base-height": "16px",
+                px: 4,
                 fontSize: 12
             },
             xs: {
-                height: 20,
-                px: 8,
-                fontSize: 13
+                "$$tag-base-height": "20px",
+                px: 4,
+                fontSize: 12
             },
             sm: {
-                height: 24,
-                px: 8,
-                fontSize: 14
+                "$$tag-base-height": "24px",
+                px: 6,
+                fontSize: 13
             },
             md: {
-                height: 28,
-                px: 12,
+                "$$tag-base-height": "28px",
+                px: 6,
                 fontSize: 14
             },
             lg: {
-                height: 32,
-                px: 12,
+                "$$tag-base-height": "32px",
+                px: 6,
                 fontSize: 14
             }
         },
         shape: {
-            pill: {},
-            round: {},
+            pill: {
+                borderRadius: "calc($$tag-base-height / 2)"
+            },
+            round: {
+                borderRadius: "calc($$tag-base-height / 4)"
+            },
             sharp: {
                 borderRadius: 0
             }
         }
-    },
-    compoundVariants: [
-        {
-            size: "3xs",
-            shape: "round",
-            css: {
-                borderRadius: 4
-            }
-        },
-        {
-            size: "2xs",
-            shape: "round",
-            css: {
-                borderRadius: 4
-            }
-        },
-        {
-            size: "xs",
-            shape: "round",
-            css: {
-                borderRadius: 6
-            }
-        },
-        {
-            size: "sm",
-            shape: "round",
-            css: {
-                borderRadius: 6
-            }
-        },
-        {
-            size: "md",
-            shape: "round",
-            css: {
-                borderRadius: 6
-            }
-        },
-        {
-            size: "lg",
-            shape: "round",
-            css: {
-                borderRadius: 8
-            }
-        },
-        {
-            size: "3xs",
-            shape: "pill",
-            css: {
-                borderRadius: 10
-            }
-        },
-        {
-            size: "2xs",
-            shape: "pill",
-            css: {
-                borderRadius: 10
-            }
-        },
-        {
-            size: "xs",
-            shape: "pill",
-            css: {
-                borderRadius: 12
-            }
-        },
-        {
-            size: "sm",
-            shape: "pill",
-            css: {
-                borderRadius: 14
-            }
-        },
-        {
-            size: "md",
-            shape: "pill",
-            css: {
-                borderRadius: 16
-            }
-        },
-        {
-            size: "lg",
-            shape: "pill",
-            css: {
-                borderRadius: 20
-            }
-        }
-    ]
+    }
 });
 
 
-const $827cce002ec16c4b$export$3288d34c523a1192 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef(({ prepend: prepend , append: append , children: children , ...props }, ref)=>{
+
+const $827cce002ec16c4b$export$3288d34c523a1192 = /*#__PURE__*/ (0, $kF5Av$react).forwardRef(({ prepend: prepend , append: append , children: children , hashValue: hashValue , color: color , ...props }, ref)=>{
+    const randomColor = (0, $kF5Av$react).useMemo(()=>{
+        if (hashValue) return (0, $0cd1b33af66db866$export$e4369cabd7e84cd9)(hashValue);
+        return "gray";
+    }, []);
     return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $b3ab9230425b9da4$export$7a4af5518e2bbe67), {
+        color: color ?? randomColor,
         ref: ref,
         ...props,
         children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $f8db34c11dd03189$export$2e2bcd8739ae039), {
@@ -4665,5 +4613,464 @@ function $b13859906e03ed0f$export$e44a253a59704894(props) {
 
 
 
-export {$d22d8a7881f7b33f$export$2e2bcd8739ae039 as Box, $07781ffe9a5ae30b$export$ef2184bd89960b14 as Grid, $07781ffe9a5ae30b$export$9eb849b9b922d396 as GridItem, $f09084fde7cc0470$export$2e2bcd8739ae039 as Column, $391d62e0590dec97$export$2e2bcd8739ae039 as Flex, $61dde3060428563f$export$f5b8910cec6cf069 as Input, $4fdef5d0844b7575$export$2e2bcd8739ae039 as Text, $7f7599719bb2a749$export$379139ebc1c2b235 as Textarea, $59636f06ede7befa$export$353f5b6fc5456de1 as Button, $39ebe5a116c39d6c$export$c25acd513dcc8062 as IconButton, $b5830f3daeb33bb2$export$48513f6b9f8ce62d as Checkbox, $5711a5825d7012d3$export$4aa08d5625cb8ead as CheckboxGroup, $b5c60232b181c4bd$export$d7b12c4107be0d61 as Radio, $b5c60232b181c4bd$export$a98f0dcb43a68a25 as RadioGroup, $f7762930a14621d8$export$f8afaea2e9656b91 as RadioCard, $604e914a624d5a0f$export$a26e8b900a29a570 as Select, $8370e4d32f002899$export$5109c6dd95d8fb00 as DatePicker, $2b3b1dc9b2ed8672$export$e2255cf6045e8d47 as Avatar, $c0386802302e82e5$export$1a5cb5295a7d2749 as FileUploader, $4724a2c0da358be5$export$1ff3c3f08ae963c0 as Separator, $12105c91de6d0b91$export$b25a304ec7d746bb as Progress, $8eafe9f534066907$export$3b0d6d7590275603 as Loader, $d20773ec72923119$export$be92b6f5f03c0fe9 as Root, $d20773ec72923119$export$6d08773d2e66f8f2 as Item, $827cce002ec16c4b$export$3288d34c523a1192 as Tag, $4fd64b5726f94f78$export$b5d5cf8927ab7262 as Switch, $fd0a1cc8c4288e44$export$dbada5ace43900dd as ColorTray, $d2eff3f3a30a8f9a$export$50e381fea3a45244 as IconTray, $ea604f064e7efbe1$export$ea98c603db73aee7 as Sticker, $b13859906e03ed0f$export$e44a253a59704894 as DropdownMenu, $40e1dcf58e198ee9$export$1aaa3deaa90ea306 as Tabs};
+
+
+
+
+const $8de20d77864e0cc6$export$a6cc9d741fb2f287 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("table", {
+    borderCollapse: "collapse",
+    width: "100%"
+});
+const $8de20d77864e0cc6$export$96f9bf5ade461735 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("tbody", {});
+const $8de20d77864e0cc6$export$8a602e750662ba27 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("tr", {});
+const $8de20d77864e0cc6$export$2306c7347640f5e4 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)("td", {
+    fontFamily: "$sans",
+    borderBottom: "1px solid $gray3",
+    py: 8,
+    fontSize: "$3",
+    variants: {
+        isHeader: {
+            true: {
+                color: "$gray10",
+                fontWeight: "$regular",
+                textAlign: "left",
+                fontSize: "$3"
+            }
+        }
+    }
+});
+
+
+
+
+
+// export function Checkbox(props: AriaCheckboxProps) {
+//   const { ...otherProps } = props;
+//   const ref = React.useRef(null);
+//   const state = useToggleState(otherProps);
+//   const { inputProps } = useCheckbox(otherProps, state, ref);
+//   return (
+//     <>
+//       <input {...inputProps} ref={ref} />
+//     </>
+//   );
+// }
+const $2c3cbfa2e31957ff$var$TableWrapper = /*#__PURE__*/ $kF5Av$forwardRef((props, ref)=>{
+    const state = (0, $kF5Av$useTableState)({
+        ...props,
+        showSelectionCheckboxes: true
+    });
+    const tableRef = $kF5Av$useRef(null);
+    const { collection: collection  } = state;
+    const { gridProps: gridProps  } = (0, $kF5Av$useTable)(props, state, tableRef);
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+        stretchX: true,
+        ref: ref,
+        children: /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $8de20d77864e0cc6$export$a6cc9d741fb2f287), {
+            ...gridProps,
+            ref: tableRef,
+            children: [
+                /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$TableRowGroup, {
+                    type: "thead",
+                    children: collection.headerRows.map((headerRow)=>{
+                        return /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$HeaderRow, {
+                            state: state,
+                            item: headerRow,
+                            children: [
+                                ...headerRow.childNodes
+                            ].map((column)=>{
+                                return column.props.isSelectionCell ? /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$SelectAllCell, {
+                                    state: state,
+                                    column: column
+                                }, column.key) : /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$ColumnHeader, {
+                                    state: state,
+                                    column: column
+                                }, column.key);
+                            })
+                        }, headerRow.key);
+                    })
+                }),
+                /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$TableRowGroup, {
+                    type: "tbody",
+                    children: [
+                        ...collection.body.childNodes
+                    ].map((row)=>{
+                        return /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$TableRow, {
+                            item: row,
+                            state: state,
+                            children: [
+                                ...row.childNodes
+                            ].map((cell)=>{
+                                return cell.props.isSelectionCell ? /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$CheckboxCell, {
+                                    cell: cell,
+                                    state: state
+                                }, cell.key) : /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$var$TableCell, {
+                                    cell: cell,
+                                    state: state
+                                }, cell.key);
+                            })
+                        }, row.key);
+                    })
+                })
+            ]
+        })
+    });
+});
+function $2c3cbfa2e31957ff$var$TableRowGroup({ type: type , children: children  }) {
+    const { rowGroupProps: rowGroupProps  } = (0, $kF5Av$useTableRowGroup)();
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $8de20d77864e0cc6$export$96f9bf5ade461735), {
+        as: type,
+        ...rowGroupProps,
+        children: children
+    });
+}
+function $2c3cbfa2e31957ff$var$HeaderRow({ item: item , state: state , children: children  }) {
+    const ref = $kF5Av$useRef(null);
+    const { rowProps: rowProps  } = (0, $kF5Av$useTableHeaderRow)({
+        node: item
+    }, state, ref);
+    return /*#__PURE__*/ (0, $kF5Av$jsx)("tr", {
+        ...rowProps,
+        ref: ref,
+        children: children
+    });
+}
+function $2c3cbfa2e31957ff$var$ColumnHeader({ column: column , state: state  }) {
+    const ref = $kF5Av$useRef(null);
+    const { columnHeaderProps: columnHeaderProps  } = (0, $kF5Av$useTableColumnHeader)({
+        node: column
+    }, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $kF5Av$useFocusRing)();
+    function getSortIcon() {
+        if (state.sortDescriptor?.direction === "ascending") return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$HiSortAscending), {
+            size: 16
+        });
+        if (state.sortDescriptor?.direction === "descending") return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$HiSortDescending), {
+            size: 16
+        });
+        return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$HiSelector), {
+            size: 16
+        });
+    }
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $8de20d77864e0cc6$export$2306c7347640f5e4), {
+        isHeader: true,
+        "data-focused": isFocusVisible,
+        as: "th",
+        ref: ref,
+        ...(0, $kF5Av$mergeProps)(focusProps, columnHeaderProps),
+        children: /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+            align: "center",
+            gap: 2,
+            children: [
+                column.rendered,
+                column.props.allowsSorting && getSortIcon()
+            ]
+        })
+    });
+}
+function $2c3cbfa2e31957ff$var$TableRow({ item: item , children: children , state: state  }) {
+    const ref = $kF5Av$useRef(null);
+    const { rowProps: rowProps , isPressed: isPressed  } = (0, $kF5Av$useTableRow)({
+        node: item
+    }, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $kF5Av$useFocusRing)();
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $8de20d77864e0cc6$export$8a602e750662ba27), {
+        ref: ref,
+        "data-pressed": isPressed,
+        "data-focused": isFocusVisible,
+        ...(0, $kF5Av$mergeProps)(focusProps, rowProps),
+        children: children
+    });
+}
+function $2c3cbfa2e31957ff$var$TableCell({ cell: cell , state: state  }) {
+    const ref = $kF5Av$useRef(null);
+    const { gridCellProps: gridCellProps  } = (0, $kF5Av$useTableCell)({
+        node: cell
+    }, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $kF5Av$useFocusRing)();
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $8de20d77864e0cc6$export$2306c7347640f5e4), {
+        "data-focused": isFocusVisible,
+        ref: ref,
+        ...(0, $kF5Av$mergeProps)(focusProps, gridCellProps),
+        children: cell.rendered
+    });
+}
+function $2c3cbfa2e31957ff$var$CheckboxCell({ cell: cell , state: state  }) {
+    const ref = $kF5Av$useRef(null);
+    const { gridCellProps: gridCellProps  } = (0, $kF5Av$useTableCell)({
+        node: cell
+    }, state, ref);
+    const { checkboxProps: checkboxProps  } = (0, $kF5Av$useTableSelectionCheckbox)({
+        key: cell.parentKey ?? (0, $0cd1b33af66db866$export$d560c7e4a29451c2)()
+    }, state);
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $8de20d77864e0cc6$export$2306c7347640f5e4), {
+        css: {
+            width: 40
+        },
+        ...gridCellProps,
+        ref: ref,
+        children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $b5830f3daeb33bb2$export$48513f6b9f8ce62d), {
+            appearance: "outline",
+            ...checkboxProps
+        })
+    });
+}
+function $2c3cbfa2e31957ff$var$SelectAllCell({ column: column , state: state  }) {
+    const ref = $kF5Av$useRef(null);
+    const { columnHeaderProps: columnHeaderProps  } = (0, $kF5Av$useTableColumnHeader)({
+        node: column
+    }, state, ref);
+    const { checkboxProps: checkboxProps  } = (0, $kF5Av$useTableSelectAllCheckbox)(state);
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $8de20d77864e0cc6$export$2306c7347640f5e4), {
+        as: "th",
+        ...columnHeaderProps,
+        ref: ref,
+        children: state.selectionManager.selectionMode === "single" ? /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$VisuallyHidden), {
+            children: checkboxProps["aria-label"]
+        }) : /*#__PURE__*/ (0, $kF5Av$jsx)((0, $b5830f3daeb33bb2$export$48513f6b9f8ce62d), {
+            appearance: "outline",
+            ...checkboxProps
+        })
+    });
+}
+function $2c3cbfa2e31957ff$export$54ec01a60f47d33d({ columns: columns , data: data , ...props }) {
+    function findColumnDefByKey(key) {
+        return columns?.find((column)=>column.key === key);
+    }
+    function renderCell(item, key) {
+        const columnDef = findColumnDefByKey(key);
+        if (!columnDef) return null;
+        if (columnDef?.render) return columnDef.render(item[columnDef.dataIndex], item);
+        return item[columnDef?.dataIndex];
+    }
+    return /*#__PURE__*/ (0, $kF5Av$jsxs)($2c3cbfa2e31957ff$var$TableWrapper, {
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$export$54ec01a60f47d33d.Header, {
+                columns: columns,
+                children: (column)=>/*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$export$54ec01a60f47d33d.Column, {
+                        allowsSorting: column.allowSorting,
+                        children: column?.title
+                    })
+            }),
+            /*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$export$54ec01a60f47d33d.Body, {
+                items: data,
+                children: (item)=>/*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$export$54ec01a60f47d33d.Row, {
+                        children: (columnKey)=>/*#__PURE__*/ (0, $kF5Av$jsx)($2c3cbfa2e31957ff$export$54ec01a60f47d33d.Cell, {
+                                children: renderCell(item, columnKey)
+                            })
+                    })
+            })
+        ]
+    });
+}
+$2c3cbfa2e31957ff$export$54ec01a60f47d33d.Header = (0, $kF5Av$TableHeader);
+$2c3cbfa2e31957ff$export$54ec01a60f47d33d.Body = (0, $kF5Av$TableBody);
+$2c3cbfa2e31957ff$export$54ec01a60f47d33d.Column = (0, $kF5Av$Column);
+$2c3cbfa2e31957ff$export$54ec01a60f47d33d.Row = (0, $kF5Av$Row);
+$2c3cbfa2e31957ff$export$54ec01a60f47d33d.Cell = (0, $kF5Av$Cell);
+$2c3cbfa2e31957ff$var$TableWrapper.displayName = "Table";
+
+
+
+
+
+
+
+
+
+
+
+
+const $03ac4c4d4168e823$export$801126757ee0703d = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+    size: "auto",
+    defaultVariants: {
+        justify: "center"
+    }
+});
+const $03ac4c4d4168e823$export$757c414c7d55357c = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+    borderInlineStart: "1px solid $gray4",
+    height: "100%",
+    width: 1
+});
+const $03ac4c4d4168e823$export$70e89defd31d36ee = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), (0, $22d93d8ad1e2d08d$export$5a7eb6284e7684f5), {
+    size: 12,
+    borderRadius: 16,
+    borderWidth: "3px !important"
+});
+const $03ac4c4d4168e823$export$c187897b30d9e78 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+    position: "relative"
+});
+const $03ac4c4d4168e823$export$17fcda98577239c4 = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+    pb: 20,
+    pl: 12
+});
+
+
+function $cdf79c1aee6c465f$export$e6a97ba2cae5bb94({ items: items , render: render , labelKey: labelKey , getIndicator: getIndicator , hideLastItemTail: hideLastItemTail = true  }) {
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+        children: items.map((item, index)=>{
+            const indicator = getIndicator?.(item) ?? /*#__PURE__*/ (0, $kF5Av$jsx)((0, $03ac4c4d4168e823$export$70e89defd31d36ee), {
+                color: "blue",
+                variant: "outline"
+            });
+            const content = render?.(item) ?? item[labelKey];
+            const isLast = index === items.length - 1;
+            return /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $03ac4c4d4168e823$export$c187897b30d9e78), {
+                children: [
+                    /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+                        align: "center",
+                        stack: true,
+                        children: [
+                            /*#__PURE__*/ (0, $kF5Av$jsx)((0, $03ac4c4d4168e823$export$801126757ee0703d), {
+                                className: "indicator-container",
+                                children: indicator
+                            }),
+                            isLast && hideLastItemTail ? null : /*#__PURE__*/ (0, $kF5Av$jsx)((0, $03ac4c4d4168e823$export$757c414c7d55357c), {})
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $kF5Av$jsx)((0, $03ac4c4d4168e823$export$17fcda98577239c4), {
+                        stretchX: true,
+                        children: content
+                    })
+                ]
+            }, index);
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $9da3b07c262d31a5$var$ModalOverlay = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "$blackA8"
+});
+const $9da3b07c262d31a5$var$ModalContent = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+    background: "white",
+    borderRadius: 12
+});
+const $9da3b07c262d31a5$var$ModalFooter = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+    p: 16
+});
+const $9da3b07c262d31a5$var$ModalHead = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+    p: 16,
+    borderBottom: "1px solid $gray3"
+});
+const $9da3b07c262d31a5$var$ModalBody = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+    p: 16
+});
+function $9da3b07c262d31a5$export$c6fdb837b070b4ff({ state: state , children: children , ...props }) {
+    const modalRef = $kF5Av$useRef(null);
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $kF5Av$useModalOverlay)(props, state, modalRef);
+    if (!state.isOpen) return null;
+    return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$Overlay), {
+        children: /*#__PURE__*/ (0, $kF5Av$jsx)($9da3b07c262d31a5$var$ModalOverlay, {
+            ...underlayProps,
+            children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+                ...modalProps,
+                ref: modalRef,
+                children: children
+            })
+        })
+    });
+}
+function $9da3b07c262d31a5$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps  }) {
+    const dialogRef = $kF5Av$useRef(null);
+    const { dialogProps: dialogProps , titleProps: titleProps  } = (0, $kF5Av$useDialog)({
+        role: "alertdialog"
+    }, dialogRef);
+    return /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalContent, {
+        css: {
+            width: width
+        },
+        ref: dialogRef,
+        ...dialogProps,
+        children: [
+            /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalHead, {
+                stack: true,
+                gap: 2,
+                className: "modal-head",
+                children: [
+                    title && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $4fdef5d0844b7575$export$2e2bcd8739ae039), {
+                        weight: "medium",
+                        size: "lg",
+                        color: "black",
+                        ...titleProps,
+                        as: "div",
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $4fdef5d0844b7575$export$2e2bcd8739ae039), {
+                        lineHeight: "base",
+                        size: "sm",
+                        color: "light",
+                        as: "div",
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $kF5Av$jsx)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+                className: "modal-body",
+                children: children
+            }),
+            (onConfirm || onCancel) && /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalFooter, {
+                gap: 2,
+                justify: "end",
+                stretchX: true,
+                children: [
+                    onCancel && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $59636f06ede7befa$export$353f5b6fc5456de1), {
+                        ...cancelButtonProps,
+                        onPress: state.close,
+                        variant: "outline",
+                        color: "gray",
+                        children: cancelLabel
+                    }),
+                    onConfirm && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $59636f06ede7befa$export$353f5b6fc5456de1), {
+                        ...confirmButtonProps,
+                        children: confirmLabel
+                    })
+                ]
+            })
+        ]
+    });
+}
+function $9da3b07c262d31a5$export$2b77a92f1a5ad772(props) {
+    return /*#__PURE__*/ (0, $kF5Av$jsx)($9da3b07c262d31a5$export$c6fdb837b070b4ff, {
+        ...props,
+        children: /*#__PURE__*/ (0, $kF5Av$jsx)($9da3b07c262d31a5$var$Dialog, {
+            ...props
+        })
+    });
+}
+function $9da3b07c262d31a5$export$33ffd74ebf07f060(props = {}) {
+    const state = (0, $kF5Av$useOverlayTriggerState)(props);
+    return state;
+}
+$9da3b07c262d31a5$export$2b77a92f1a5ad772.Body = $9da3b07c262d31a5$var$ModalBody;
+$9da3b07c262d31a5$export$2b77a92f1a5ad772.Footer = $9da3b07c262d31a5$var$ModalFooter;
+$9da3b07c262d31a5$export$2b77a92f1a5ad772.useModal = $9da3b07c262d31a5$export$33ffd74ebf07f060;
+
+
+
+
+
+
+
+export {$d22d8a7881f7b33f$export$2e2bcd8739ae039 as Box, $07781ffe9a5ae30b$export$ef2184bd89960b14 as Grid, $07781ffe9a5ae30b$export$9eb849b9b922d396 as GridItem, $f09084fde7cc0470$export$2e2bcd8739ae039 as Column, $391d62e0590dec97$export$2e2bcd8739ae039 as Flex, $61dde3060428563f$export$f5b8910cec6cf069 as Input, $4fdef5d0844b7575$export$2e2bcd8739ae039 as Text, $7f7599719bb2a749$export$379139ebc1c2b235 as Textarea, $59636f06ede7befa$export$353f5b6fc5456de1 as Button, $39ebe5a116c39d6c$export$c25acd513dcc8062 as IconButton, $b5830f3daeb33bb2$export$48513f6b9f8ce62d as Checkbox, $5711a5825d7012d3$export$4aa08d5625cb8ead as CheckboxGroup, $b5c60232b181c4bd$export$d7b12c4107be0d61 as Radio, $b5c60232b181c4bd$export$a98f0dcb43a68a25 as RadioGroup, $f7762930a14621d8$export$f8afaea2e9656b91 as RadioCard, $604e914a624d5a0f$export$a26e8b900a29a570 as Select, $8370e4d32f002899$export$5109c6dd95d8fb00 as DatePicker, $2b3b1dc9b2ed8672$export$e2255cf6045e8d47 as Avatar, $c0386802302e82e5$export$1a5cb5295a7d2749 as FileUploader, $4724a2c0da358be5$export$1ff3c3f08ae963c0 as Separator, $12105c91de6d0b91$export$b25a304ec7d746bb as Progress, $8eafe9f534066907$export$3b0d6d7590275603 as Loader, $d20773ec72923119$export$be92b6f5f03c0fe9 as Root, $d20773ec72923119$export$6d08773d2e66f8f2 as Item, $827cce002ec16c4b$export$3288d34c523a1192 as Tag, $4fd64b5726f94f78$export$b5d5cf8927ab7262 as Switch, $fd0a1cc8c4288e44$export$dbada5ace43900dd as ColorTray, $d2eff3f3a30a8f9a$export$50e381fea3a45244 as IconTray, $ea604f064e7efbe1$export$ea98c603db73aee7 as Sticker, $b13859906e03ed0f$export$e44a253a59704894 as DropdownMenu, $40e1dcf58e198ee9$export$1aaa3deaa90ea306 as Tabs, $2c3cbfa2e31957ff$export$54ec01a60f47d33d as Table, $cdf79c1aee6c465f$export$e6a97ba2cae5bb94 as Timeline, $9da3b07c262d31a5$export$2b77a92f1a5ad772 as Modal, $9ade691eb9e41cfb$export$3817b7a54a07cec7 as parrot, $9ade691eb9e41cfb$export$bca14c5b3b88a9c9 as ParrotTheme, $9ade691eb9e41cfb$export$e506a1d27d1eaa20 as ParrotThemeConfig};
 //# sourceMappingURL=module.js.map