@parrot-co/parrot-ui 0.0.67 → 0.0.70

package/dist/main.js

@@ -46,6 +46,8 @@ $parcel$export(module.exports, "Sticker", () => $a15741e0d788b3da$export$ea98c60
 $parcel$export(module.exports, "DropdownMenu", () => $39b5e387b93e95b5$export$e44a253a59704894);
 $parcel$export(module.exports, "Tabs", () => $33f331db51cbeb3d$export$1aaa3deaa90ea306);
 $parcel$export(module.exports, "Table", () => $3dd82f03c348455b$export$54ec01a60f47d33d);
+$parcel$export(module.exports, "Timeline", () => $c07c6db9734c74af$export$e6a97ba2cae5bb94);
+$parcel$export(module.exports, "Modal", () => $ceb05569908c0e0d$export$2b77a92f1a5ad772);
 $parcel$export(module.exports, "parrot", () => $80923bc9c1ba824c$export$3817b7a54a07cec7);
 $parcel$export(module.exports, "ParrotTheme", () => $80923bc9c1ba824c$export$bca14c5b3b88a9c9);
 $parcel$export(module.exports, "ParrotThemeConfig", () => $80923bc9c1ba824c$export$e506a1d27d1eaa20);
@@ -1075,7 +1077,7 @@ function $02a166a5043d2558$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: $02a166a5043d2558$export$71074ab0ed740397("violet")
             }
@@ -1521,29 +1523,23 @@ var $66ede1fa66acd93e$export$2e2bcd8739ae039 = $66ede1fa66acd93e$var$InputError;
 
 
 
-
-const $04e5d96aee536e27$var$Socket = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("div", {
+const $04e5d96aee536e27$var$Socket = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("span", {
     display: "flex",
     height: "100%",
+    alignItems: "center",
     variants: {
         side: {
             left: {
-                pl: 8
+                pr: 4
             },
             right: {
-                pr: 8
+                pl: 4
             }
         }
     }
 });
 const $04e5d96aee536e27$var$Sockets = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ append: append , prepend: prepend , children: children , ...props }, ref)=>{
-    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
-        align: "center",
-        justify: "center",
-        gap: 2,
-        stretchX: true,
-        ref: ref,
-        ...props,
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $04e5d96aee536e27$import$867d6c90a4013129$ffb0004e005737fa), {
         children: [
             prepend && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($04e5d96aee536e27$var$Socket, {
                 side: "left",
@@ -2074,6 +2070,9 @@ const $c88148a2f2e3c74c$export$b28585a458fee016 = /*#__PURE__*/ (0, ($parcel$int
         ...props,
         type: showPassword ? "text" : "password",
         append: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $8d4373b1a05e63fb$export$353f5b6fc5456de1), {
+            css: {
+                marginRight: 6
+            },
             variant: "solid",
             color: "white",
             size: "xs",
@@ -2240,10 +2239,17 @@ const $51cace3b4418a1cf$export$74cd3087fed3724d = (0, $80923bc9c1ba824c$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",
@@ -2294,7 +2300,7 @@ const $51cace3b4418a1cf$export$74cd3087fed3724d = (0, $80923bc9c1ba824c$export$3
             size: "sm",
             shape: "round",
             css: {
-                borderRadius: 6
+                borderRadius: 4
             }
         },
         {
@@ -2322,13 +2328,12 @@ const $51cace3b4418a1cf$export$74cd3087fed3724d = (0, $80923bc9c1ba824c$export$3
 });
 
 
+
 const $869aa95ca6defa25$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
     const { appearance: appearance , size: size , ...otherProps } = props;
     // check if checkbox is rendered in a group context
     const groupState = (0, ($parcel$interopDefault($E4F9t$react))).useContext((0, $b8075849c644c9bf$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, $E4F9t$reactstately.useToggleState)(props);
     const inputRef = (0, ($parcel$interopDefault($E4F9t$react))).useRef(null);
     const single = (0, $E4F9t$reactaria.useCheckbox)(otherProps, singleState, inputRef);
@@ -2336,7 +2341,7 @@ const $869aa95ca6defa25$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
     const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $E4F9t$reactaria.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, $E4F9t$reactjsxruntime.jsxs)((0, $51cace3b4418a1cf$export$eea83358d9434634), {
         "data-disabled": inputProps?.disabled,
         ref: ref,
@@ -2349,27 +2354,39 @@ const $869aa95ca6defa25$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
                     ...focusProps
                 })
             }),
-            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $51cace3b4418a1cf$export$74cd3087fed3724d), {
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $51cace3b4418a1cf$export$74cd3087fed3724d), {
+                "data-focused": isFocusVisible,
                 "aria-hidden": "true",
                 "data-checked": isSelected,
+                "data-indeterminate": props.isIndeterminate,
                 size: size,
                 appearance: appearance,
-                children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("svg", {
-                    stroke: "white",
-                    width: "0.75rem",
-                    height: "0.75rem",
-                    viewBox: "0 0 18 18",
-                    children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.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, $E4F9t$reactjsxruntime.jsx)("svg", {
+                        stroke: "white",
+                        width: "0.75rem",
+                        height: "0.75rem",
+                        viewBox: "0 0 18 18",
+                        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.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, $E4F9t$reactjsxruntime.jsx)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+                        css: {
+                            background: "$gray11",
+                            width: "70%",
+                            height: 2,
+                            borderRadius: 4
                         }
                     })
-                })
+                ]
             }),
             otherProps.children
         ]
@@ -3428,6 +3445,7 @@ const $8fff24416ec1775a$export$f7513421c53ce141 = (0, $80923bc9c1ba824c$export$3
 
 
 
+
 function $e12b0eb570e3e94c$export$d41d9ab3de2def3d(text) {
     const str = String(text);
     let hash = 0;
@@ -3444,6 +3462,10 @@ function $e12b0eb570e3e94c$export$d41d9ab3de2def3d(text) {
 function $e12b0eb570e3e94c$export$d560c7e4a29451c2() {
     return Math.random().toString(36);
 }
+function $e12b0eb570e3e94c$export$e4369cabd7e84cd9(string) {
+    const hash = $e12b0eb570e3e94c$export$d41d9ab3de2def3d(string);
+    return (0, $02a166a5043d2558$export$36308cce1deef340)[hash % (0, $02a166a5043d2558$export$36308cce1deef340).length];
+}
 
 
 const $53cff1de4d77d0c5$export$e2255cf6045e8d47 = /*#__PURE__*/ $E4F9t$react.forwardRef(({ src: src , alt: alt , name: name , color: color , variant: variant = "light" , fallback: fallback , children: children , ...props }, ref)=>{
@@ -3934,12 +3956,15 @@ const $33f331db51cbeb3d$export$1aaa3deaa90ea306 = {
 
 
 
-const $e1b9bb7437d6292e$export$7a4af5518e2bbe67 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("div", (0, $02a166a5043d2558$export$5a7eb6284e7684f5), {
+const $e1b9bb7437d6292e$export$7a4af5518e2bbe67 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("span", (0, $02a166a5043d2558$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",
@@ -3949,135 +3974,59 @@ const $e1b9bb7437d6292e$export$7a4af5518e2bbe67 = (0, $80923bc9c1ba824c$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 $232939a9dd93729d$export$3288d34c523a1192 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ prepend: prepend , append: append , children: children , ...props }, ref)=>{
+
+const $232939a9dd93729d$export$3288d34c523a1192 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ prepend: prepend , append: append , children: children , hashValue: hashValue , color: color , ...props }, ref)=>{
+    const randomColor = (0, ($parcel$interopDefault($E4F9t$react))).useMemo(()=>{
+        if (hashValue) return (0, $e12b0eb570e3e94c$export$e4369cabd7e84cd9)(hashValue);
+        return "gray";
+    }, []);
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $e1b9bb7437d6292e$export$7a4af5518e2bbe67), {
+        color: color ?? randomColor,
         ref: ref,
         ...props,
         children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $04e5d96aee536e27$export$2e2bcd8739ae039), {
@@ -4708,10 +4657,490 @@ function $39b5e387b93e95b5$export$e44a253a59704894(props) {
 
 
 
-const $3dd82f03c348455b$export$54ec01a60f47d33d = /*#__PURE__*/ $E4F9t$react.forwardRef((props, ref)=>{
-    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("div", {});
+
+
+
+
+const $96aabcfbe9019d87$export$a6cc9d741fb2f287 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("table", {
+    borderCollapse: "collapse",
+    width: "100%"
+});
+const $96aabcfbe9019d87$export$96f9bf5ade461735 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("tbody", {});
+const $96aabcfbe9019d87$export$8a602e750662ba27 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("tr", {});
+const $96aabcfbe9019d87$export$2306c7347640f5e4 = (0, $80923bc9c1ba824c$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 $3dd82f03c348455b$var$TableWrapper = /*#__PURE__*/ $E4F9t$react.forwardRef((props, ref)=>{
+    const state = (0, $E4F9t$reactstately.useTableState)({
+        ...props,
+        showSelectionCheckboxes: true
+    });
+    const tableRef = $E4F9t$react.useRef(null);
+    const { collection: collection  } = state;
+    const { gridProps: gridProps  } = (0, $E4F9t$reactaria.useTable)(props, state, tableRef);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+        stretchX: true,
+        ref: ref,
+        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $96aabcfbe9019d87$export$a6cc9d741fb2f287), {
+            ...gridProps,
+            ref: tableRef,
+            children: [
+                /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$TableRowGroup, {
+                    type: "thead",
+                    children: collection.headerRows.map((headerRow)=>{
+                        return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$HeaderRow, {
+                            state: state,
+                            item: headerRow,
+                            children: [
+                                ...headerRow.childNodes
+                            ].map((column)=>{
+                                return column.props.isSelectionCell ? /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$SelectAllCell, {
+                                    state: state,
+                                    column: column
+                                }, column.key) : /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$ColumnHeader, {
+                                    state: state,
+                                    column: column
+                                }, column.key);
+                            })
+                        }, headerRow.key);
+                    })
+                }),
+                /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$TableRowGroup, {
+                    type: "tbody",
+                    children: [
+                        ...collection.body.childNodes
+                    ].map((row)=>{
+                        return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$TableRow, {
+                            item: row,
+                            state: state,
+                            children: [
+                                ...row.childNodes
+                            ].map((cell)=>{
+                                return cell.props.isSelectionCell ? /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$CheckboxCell, {
+                                    cell: cell,
+                                    state: state
+                                }, cell.key) : /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$var$TableCell, {
+                                    cell: cell,
+                                    state: state
+                                }, cell.key);
+                            })
+                        }, row.key);
+                    })
+                })
+            ]
+        })
+    });
 });
-$3dd82f03c348455b$export$54ec01a60f47d33d.displayName = "Table";
+function $3dd82f03c348455b$var$TableRowGroup({ type: type , children: children  }) {
+    const { rowGroupProps: rowGroupProps  } = (0, $E4F9t$reactaria.useTableRowGroup)();
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $96aabcfbe9019d87$export$96f9bf5ade461735), {
+        as: type,
+        ...rowGroupProps,
+        children: children
+    });
+}
+function $3dd82f03c348455b$var$HeaderRow({ item: item , state: state , children: children  }) {
+    const ref = $E4F9t$react.useRef(null);
+    const { rowProps: rowProps  } = (0, $E4F9t$reactaria.useTableHeaderRow)({
+        node: item
+    }, state, ref);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("tr", {
+        ...rowProps,
+        ref: ref,
+        children: children
+    });
+}
+function $3dd82f03c348455b$var$ColumnHeader({ column: column , state: state  }) {
+    const ref = $E4F9t$react.useRef(null);
+    const { columnHeaderProps: columnHeaderProps  } = (0, $E4F9t$reactaria.useTableColumnHeader)({
+        node: column
+    }, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $E4F9t$reactaria.useFocusRing)();
+    function getSortIcon() {
+        if (state.sortDescriptor?.direction === "ascending") return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reacticonshi.HiSortAscending), {
+            size: 16
+        });
+        if (state.sortDescriptor?.direction === "descending") return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reacticonshi.HiSortDescending), {
+            size: 16
+        });
+        return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reacticonshi.HiSelector), {
+            size: 16
+        });
+    }
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $96aabcfbe9019d87$export$2306c7347640f5e4), {
+        isHeader: true,
+        "data-focused": isFocusVisible,
+        as: "th",
+        ref: ref,
+        ...(0, $E4F9t$reactaria.mergeProps)(focusProps, columnHeaderProps),
+        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+            align: "center",
+            gap: 2,
+            children: [
+                column.rendered,
+                column.props.allowsSorting && getSortIcon()
+            ]
+        })
+    });
+}
+function $3dd82f03c348455b$var$TableRow({ item: item , children: children , state: state  }) {
+    const ref = $E4F9t$react.useRef(null);
+    const { rowProps: rowProps , isPressed: isPressed  } = (0, $E4F9t$reactaria.useTableRow)({
+        node: item
+    }, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $E4F9t$reactaria.useFocusRing)();
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $96aabcfbe9019d87$export$8a602e750662ba27), {
+        ref: ref,
+        "data-pressed": isPressed,
+        "data-focused": isFocusVisible,
+        ...(0, $E4F9t$reactaria.mergeProps)(focusProps, rowProps),
+        children: children
+    });
+}
+function $3dd82f03c348455b$var$TableCell({ cell: cell , state: state  }) {
+    const ref = $E4F9t$react.useRef(null);
+    const { gridCellProps: gridCellProps  } = (0, $E4F9t$reactaria.useTableCell)({
+        node: cell
+    }, state, ref);
+    const { isFocusVisible: isFocusVisible , focusProps: focusProps  } = (0, $E4F9t$reactaria.useFocusRing)();
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $96aabcfbe9019d87$export$2306c7347640f5e4), {
+        "data-focused": isFocusVisible,
+        ref: ref,
+        ...(0, $E4F9t$reactaria.mergeProps)(focusProps, gridCellProps),
+        children: cell.rendered
+    });
+}
+function $3dd82f03c348455b$var$CheckboxCell({ cell: cell , state: state  }) {
+    const ref = $E4F9t$react.useRef(null);
+    const { gridCellProps: gridCellProps  } = (0, $E4F9t$reactaria.useTableCell)({
+        node: cell
+    }, state, ref);
+    const { checkboxProps: checkboxProps  } = (0, $E4F9t$reactaria.useTableSelectionCheckbox)({
+        key: cell.parentKey ?? (0, $e12b0eb570e3e94c$export$d560c7e4a29451c2)()
+    }, state);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $96aabcfbe9019d87$export$2306c7347640f5e4), {
+        css: {
+            width: 40
+        },
+        ...gridCellProps,
+        ref: ref,
+        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $869aa95ca6defa25$export$48513f6b9f8ce62d), {
+            appearance: "outline",
+            ...checkboxProps
+        })
+    });
+}
+function $3dd82f03c348455b$var$SelectAllCell({ column: column , state: state  }) {
+    const ref = $E4F9t$react.useRef(null);
+    const { columnHeaderProps: columnHeaderProps  } = (0, $E4F9t$reactaria.useTableColumnHeader)({
+        node: column
+    }, state, ref);
+    const { checkboxProps: checkboxProps  } = (0, $E4F9t$reactaria.useTableSelectAllCheckbox)(state);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $96aabcfbe9019d87$export$2306c7347640f5e4), {
+        as: "th",
+        ...columnHeaderProps,
+        ref: ref,
+        children: state.selectionManager.selectionMode === "single" ? /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactaria.VisuallyHidden), {
+            children: checkboxProps["aria-label"]
+        }) : /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $869aa95ca6defa25$export$48513f6b9f8ce62d), {
+            appearance: "outline",
+            ...checkboxProps
+        })
+    });
+}
+function $3dd82f03c348455b$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, $E4F9t$reactjsxruntime.jsxs)($3dd82f03c348455b$var$TableWrapper, {
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$export$54ec01a60f47d33d.Header, {
+                columns: columns,
+                children: (column)=>/*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$export$54ec01a60f47d33d.Column, {
+                        allowsSorting: column.allowSorting,
+                        children: column?.title
+                    })
+            }),
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$export$54ec01a60f47d33d.Body, {
+                items: data,
+                children: (item)=>/*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$export$54ec01a60f47d33d.Row, {
+                        children: (columnKey)=>/*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($3dd82f03c348455b$export$54ec01a60f47d33d.Cell, {
+                                children: renderCell(item, columnKey)
+                            })
+                    })
+            })
+        ]
+    });
+}
+$3dd82f03c348455b$export$54ec01a60f47d33d.Header = (0, $E4F9t$reactstately.TableHeader);
+$3dd82f03c348455b$export$54ec01a60f47d33d.Body = (0, $E4F9t$reactstately.TableBody);
+$3dd82f03c348455b$export$54ec01a60f47d33d.Column = (0, $E4F9t$reactstately.Column);
+$3dd82f03c348455b$export$54ec01a60f47d33d.Row = (0, $E4F9t$reactstately.Row);
+$3dd82f03c348455b$export$54ec01a60f47d33d.Cell = (0, $E4F9t$reactstately.Cell);
+$3dd82f03c348455b$var$TableWrapper.displayName = "Table";
+
+
+
+
+
+
+
+
+
+
+
+
+const $b93150847fb5275f$export$801126757ee0703d = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    size: "auto",
+    defaultVariants: {
+        justify: "center"
+    }
+});
+const $b93150847fb5275f$export$757c414c7d55357c = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+    borderInlineStart: "1px solid $gray4",
+    height: "100%",
+    width: 1
+});
+const $b93150847fb5275f$export$70e89defd31d36ee = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), (0, $02a166a5043d2558$export$5a7eb6284e7684f5), {
+    size: 12,
+    borderRadius: 16,
+    borderWidth: "3px !important"
+});
+const $b93150847fb5275f$export$c187897b30d9e78 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    position: "relative"
+});
+const $b93150847fb5275f$export$17fcda98577239c4 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    pb: 20,
+    pl: 12
+});
+
+
+function $c07c6db9734c74af$export$e6a97ba2cae5bb94({ items: items , render: render , labelKey: labelKey , getIndicator: getIndicator , hideLastItemTail: hideLastItemTail = true  }) {
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+        children: items.map((item, index)=>{
+            const indicator = getIndicator?.(item) ?? /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $b93150847fb5275f$export$70e89defd31d36ee), {
+                color: "blue",
+                variant: "outline"
+            });
+            const content = render?.(item) ?? item[labelKey];
+            const isLast = index === items.length - 1;
+            return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $b93150847fb5275f$export$c187897b30d9e78), {
+                children: [
+                    /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+                        align: "center",
+                        stack: true,
+                        children: [
+                            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $b93150847fb5275f$export$801126757ee0703d), {
+                                className: "indicator-container",
+                                children: indicator
+                            }),
+                            isLast && hideLastItemTail ? null : /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $b93150847fb5275f$export$757c414c7d55357c), {})
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $b93150847fb5275f$export$17fcda98577239c4), {
+                        stretchX: true,
+                        children: content
+                    })
+                ]
+            }, index);
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $ceb05569908c0e0d$var$ModalUnderlay = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: "$blackA8",
+    width: "100vw",
+    height: "100vh"
+});
+const $ceb05569908c0e0d$var$ModalContainer = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+    display: "grid",
+    width: "100vw",
+    height: "100vh",
+    p: 12
+});
+const $ceb05569908c0e0d$var$ModalContent = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+    background: "white",
+    borderRadius: 12,
+    display: "grid",
+    gridTemplateRows: "1fr, 60px",
+    flexDirection: "column",
+    defaultVariants: {
+        variant: "modal"
+    },
+    variants: {
+        variant: {
+            modal: {
+                alignSelf: "center",
+                justifySelf: "center"
+            },
+            drawer: {
+                justifySelf: "end"
+            }
+        }
+    }
+});
+const $ceb05569908c0e0d$var$ModalFooter = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    p: 16,
+    alignSelf: "flex-end"
+});
+const $ceb05569908c0e0d$var$ModalHead = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    p: 16,
+    borderBottom: "1px solid $gray3"
+});
+const $ceb05569908c0e0d$var$ModalBody = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+    p: 16
+});
+function $ceb05569908c0e0d$export$c6fdb837b070b4ff({ state: state , children: children , css: css , ...props }) {
+    const modalRef = $E4F9t$react.useRef(null);
+    const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $E4F9t$reactaria.useModalOverlay)(props, state, modalRef);
+    if (!state.isOpen) return null;
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactaria.Overlay), {
+        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$var$ModalUnderlay, {
+            className: "underlay",
+            css: css,
+            ...underlayProps,
+            children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$var$ModalContainer, {
+                className: "modal-container",
+                ...modalProps,
+                ref: modalRef,
+                children: children
+            })
+        })
+    });
+}
+function $ceb05569908c0e0d$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 , variant: variant  }) {
+    const dialogRef = $E4F9t$react.useRef(null);
+    const { dialogProps: dialogProps , titleProps: titleProps  } = (0, $E4F9t$reactaria.useDialog)({
+        role: "alertdialog"
+    }, dialogRef);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalContent, {
+        variant: variant,
+        css: {
+            width: width
+        },
+        ref: dialogRef,
+        ...dialogProps,
+        children: [
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+                stack: true,
+                children: [
+                    /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalHead, {
+                        stack: true,
+                        gap: 2,
+                        className: "modal-head",
+                        children: [
+                            title && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6fb5722ea7b379d7$export$2e2bcd8739ae039), {
+                                weight: "medium",
+                                size: "lg",
+                                color: "black",
+                                ...titleProps,
+                                as: "div",
+                                children: title
+                            }),
+                            description && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6fb5722ea7b379d7$export$2e2bcd8739ae039), {
+                                lineHeight: "base",
+                                size: "sm",
+                                color: "light",
+                                as: "div",
+                                children: description
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+                        className: "modal-body",
+                        children: children
+                    })
+                ]
+            }),
+            (onConfirm || onCancel) && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($ceb05569908c0e0d$var$ModalFooter, {
+                gap: 2,
+                justify: "end",
+                stretchX: true,
+                children: [
+                    onCancel && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $8d4373b1a05e63fb$export$353f5b6fc5456de1), {
+                        ...cancelButtonProps,
+                        onPress: state.close,
+                        variant: "outline",
+                        color: "gray",
+                        children: cancelLabel
+                    }),
+                    onConfirm && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $8d4373b1a05e63fb$export$353f5b6fc5456de1), {
+                        ...confirmButtonProps,
+                        children: confirmLabel
+                    })
+                ]
+            })
+        ]
+    });
+}
+function $ceb05569908c0e0d$export$2b77a92f1a5ad772(props) {
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$export$c6fdb837b070b4ff, {
+        ...props,
+        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($ceb05569908c0e0d$var$Dialog, {
+            ...props
+        })
+    });
+}
+function $ceb05569908c0e0d$export$33ffd74ebf07f060(props = {}) {
+    const state = (0, $E4F9t$reactstately.useOverlayTriggerState)(props);
+    return state;
+}
+$ceb05569908c0e0d$export$2b77a92f1a5ad772.Body = $ceb05569908c0e0d$var$ModalBody;
+$ceb05569908c0e0d$export$2b77a92f1a5ad772.Footer = $ceb05569908c0e0d$var$ModalFooter;
+$ceb05569908c0e0d$export$2b77a92f1a5ad772.useModal = $ceb05569908c0e0d$export$33ffd74ebf07f060;