@ceed/ads 0.0.34 → 0.0.36

package/dist/index.js

@@ -1,6 +1,1254 @@
-export { 
-// Custom UI
-boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, 
-// Pure JoyUI
-accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, Autocomplete, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, Breadcrumbs, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
-export { Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Button, Checkbox, Container, DataTable, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";
+// src/index.ts
+import {
+  boxClasses,
+  buttonClasses,
+  checkboxClasses as checkboxClasses2,
+  dividerClasses,
+  iconButtonClasses,
+  inputClasses,
+  menuClasses,
+  menuButtonClasses,
+  menuItemClasses,
+  optionClasses,
+  radioClasses,
+  radioGroupClasses,
+  selectClasses,
+  switchClasses as switchClasses2,
+  tableClasses,
+  textareaClasses,
+  typographyClasses,
+  formControlClasses,
+  formLabelClasses,
+  formHelperTextClasses,
+  gridClasses,
+  stackClasses,
+  sheetClasses,
+  modalClasses,
+  modalCloseClasses,
+  modalDialogClasses,
+  modalOverflowClasses,
+  dialogTitleClasses,
+  dialogContentClasses,
+  dialogActionsClasses,
+  tooltipClasses,
+  tabsClasses,
+  tabListClasses,
+  tabPanelClasses,
+  accordionClasses,
+  accordionDetailsClasses,
+  accordionGroupClasses,
+  accordionSummaryClasses,
+  Autocomplete,
+  AutocompleteListbox,
+  AutocompleteOption,
+  autocompleteClasses,
+  autocompleteListboxClasses,
+  autocompleteOptionClasses,
+  Avatar,
+  avatarClasses,
+  AvatarGroup,
+  avatarGroupClasses,
+  AspectRatio,
+  aspectRatioClasses,
+  Badge,
+  badgeClasses,
+  Breadcrumbs,
+  breadcrumbsClasses,
+  Card,
+  cardClasses,
+  CardActions,
+  cardActionsClasses,
+  CardContent,
+  cardContentClasses,
+  CardCover,
+  cardCoverClasses,
+  CardOverflow,
+  cardOverflowClasses,
+  Chip,
+  chipClasses,
+  CircularProgress,
+  circularProgressClasses,
+  Drawer,
+  drawerClasses,
+  LinearProgress,
+  linearProgressClasses,
+  List,
+  listClasses,
+  ListDivider,
+  listDividerClasses,
+  ListItem,
+  listItemClasses,
+  ListItemButton,
+  listItemButtonClasses,
+  ListItemContent,
+  listItemContentClasses,
+  ListItemDecorator,
+  listItemDecoratorClasses,
+  ListSubheader,
+  listSubheaderClasses,
+  Link,
+  linkClasses,
+  Slider,
+  sliderClasses,
+  Step,
+  stepClasses,
+  StepButton,
+  stepButtonClasses,
+  StepIndicator,
+  Stepper,
+  stepperClasses,
+  Skeleton,
+  skeletonClasses
+} from "@mui/joy";
+
+// src/components/Accordions/Accordions.tsx
+import React from "react";
+import {
+  AccordionGroup as JoyAccordionGroup,
+  Accordion as JoyAccordion,
+  AccordionSummary as JoyAccordionSummary,
+  AccordionDetails as JoyAccordionDetails
+} from "@mui/joy";
+import { motion } from "framer-motion";
+var MotionAccordionSummary = motion(JoyAccordionSummary);
+var AccordionSummary = MotionAccordionSummary;
+AccordionSummary.displayName = "AccordionSummary";
+var MotionAccordionDetails = motion(JoyAccordionDetails);
+var AccordionDetails = MotionAccordionDetails;
+AccordionDetails.displayName = "AccordionDetails";
+var MotionAccordion = motion(JoyAccordion);
+function Accordion(props) {
+  const { summary, details, variant, color, ...innerProps } = props;
+  const inheritedVariant = variant === "solid" ? "solid" : void 0;
+  return /* @__PURE__ */ React.createElement(MotionAccordion, { variant: inheritedVariant, color, ...innerProps }, /* @__PURE__ */ React.createElement(AccordionSummary, { variant: inheritedVariant, color }, summary), /* @__PURE__ */ React.createElement(AccordionDetails, { variant: inheritedVariant, color }, details));
+}
+Accordion.displayName = "Accordion";
+var MotionAccordions = motion(JoyAccordionGroup);
+function Accordions(props) {
+  const { variant, color, items, ...innerProps } = props;
+  return /* @__PURE__ */ React.createElement(MotionAccordions, { variant, color, ...innerProps }, items.map((item, index) => /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      summary: item.summary,
+      details: item.details,
+      index,
+      variant,
+      color
+    }
+  )));
+}
+Accordions.displayName = "Accordions";
+
+// src/components/Box/Box.tsx
+import { Box as JoyBox } from "@mui/joy";
+import { motion as motion2 } from "framer-motion";
+var MotionBox = motion2(JoyBox);
+var Box = MotionBox;
+Box.displayName = "Box";
+
+// src/components/Box/index.ts
+var Box_default = Box;
+
+// src/components/Button/Button.tsx
+import React2, { forwardRef } from "react";
+import { Button as JoyButton } from "@mui/joy";
+import { motion as motion3 } from "framer-motion";
+var MotionButton = motion3(JoyButton);
+var Button = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React2.createElement(
+      MotionButton,
+      {
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Button/index.ts
+var Button_default = Button;
+
+// src/components/Checkbox/Checkbox.tsx
+import React3 from "react";
+import { Checkbox as JoyCheckbox } from "@mui/joy";
+import { motion as motion4 } from "framer-motion";
+var MotionCheckbox = motion4(JoyCheckbox);
+var Checkbox = (props) => {
+  return /* @__PURE__ */ React3.createElement(MotionCheckbox, { ...props });
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/Checkbox/index.ts
+var Checkbox_default = Checkbox;
+
+// src/components/Container/Container.tsx
+import { styled } from "@mui/joy";
+import React4, { forwardRef as forwardRef2 } from "react";
+var ContainerRoot = styled("div", {
+  name: "Container",
+  slot: "root",
+  shouldForwardProp: (prop) => prop !== "maxWidth"
+})(({ theme, maxWidth = "lg" }) => ({
+  width: "100%",
+  marginLeft: "auto",
+  boxSizing: "border-box",
+  marginRight: "auto",
+  display: "block",
+  // Fix IE11 layout when used with main.
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  ...maxWidth === "sm" && {
+    [theme.breakpoints.up("xs")]: {
+      maxWidth: theme.breakpoints.values.sm
+    }
+  },
+  ...maxWidth === "md" && {
+    [theme.breakpoints.up("sm")]: {
+      maxWidth: theme.breakpoints.values.md
+    }
+  },
+  ...maxWidth === "lg" && {
+    [theme.breakpoints.up("md")]: {
+      maxWidth: theme.breakpoints.values.lg
+    }
+  },
+  ...maxWidth === "xl" && {
+    [theme.breakpoints.up("lg")]: {
+      maxWidth: theme.breakpoints.values.xl
+    }
+  }
+}));
+var Container = forwardRef2(function Container2(props, ref) {
+  return /* @__PURE__ */ React4.createElement(ContainerRoot, { ref, ...props });
+});
+Container.displayName = "Container";
+
+// src/components/DataTable/DataTable.tsx
+import React7, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/components/Sheet/Sheet.tsx
+import { Sheet as JoySheet } from "@mui/joy";
+import { motion as motion5 } from "framer-motion";
+var MotionSheet = motion5(JoySheet);
+var Sheet = MotionSheet;
+Sheet.displayName = "Sheet";
+
+// src/components/Sheet/index.ts
+var Sheet_default = Sheet;
+
+// src/components/Table/Table.tsx
+import React5 from "react";
+import { Table as JoyTable } from "@mui/joy";
+var Table = (props) => {
+  const { children, ...inheritProps } = props;
+  return /* @__PURE__ */ React5.createElement(JoyTable, { ...inheritProps }, children);
+};
+Table.displayName = "Table";
+function TableHead(props) {
+  const {
+    headCells,
+    showCheckbox,
+    onCheckboxChange,
+    slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
+    slotProps: { checkbox: checkboxProps = {} } = {}
+  } = props;
+  return /* @__PURE__ */ React5.createElement("thead", null, /* @__PURE__ */ React5.createElement("tr", null, showCheckbox && /* @__PURE__ */ React5.createElement(
+    "th",
+    {
+      style: {
+        width: "40px",
+        textAlign: "center"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(RenderCheckbox, { onChange: onCheckboxChange, ...checkboxProps })
+  ), headCells.map((headCell) => /* @__PURE__ */ React5.createElement(
+    "th",
+    {
+      key: headCell.label,
+      style: {
+        width: headCell.width,
+        minWidth: headCell.minWidth,
+        maxWidth: headCell.maxWidth,
+        textAlign: headCell.numeric ? "right" : "left"
+      }
+    },
+    headCell.label
+  ))));
+}
+TableHead.displayName = "TableHead";
+function TableBody(props) {
+  const {
+    rows,
+    cellOrder,
+    rowOptions,
+    showCheckbox,
+    onCheckboxChange,
+    slots: { checkbox: RenderCheckbox = Checkbox_default } = {},
+    slotProps: { checkbox: checkboxProps = {} } = {}
+  } = props;
+  return /* @__PURE__ */ React5.createElement("tbody", null, rows.map((row, rowIndex) => /* @__PURE__ */ React5.createElement("tr", { key: rowIndex }, showCheckbox && /* @__PURE__ */ React5.createElement(
+    "td",
+    {
+      style: {
+        textAlign: "center"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      RenderCheckbox,
+      {
+        onChange: (event) => onCheckboxChange?.(event, rowIndex),
+        ...checkboxProps
+      }
+    )
+  ), cellOrder.map((cellKey) => /* @__PURE__ */ React5.createElement(
+    "td",
+    {
+      key: cellKey,
+      style: {
+        textAlign: rowOptions?.[cellKey]?.numeric ? "right" : "left"
+      }
+    },
+    row[cellKey]
+  )))));
+}
+TableBody.displayName = "TableBody";
+
+// src/components/Stack/Stack.tsx
+import { Stack as JoyStack } from "@mui/joy";
+import { motion as motion6 } from "framer-motion";
+var MotionStack = motion6(JoyStack);
+var Stack = MotionStack;
+Stack.displayName = "Stack";
+
+// src/components/Stack/index.ts
+var Stack_default = Stack;
+
+// src/components/Typography/Typography.tsx
+import React6 from "react";
+import { Typography as JoyTypography } from "@mui/joy";
+import { motion as motion7 } from "framer-motion";
+var MotionTypography = motion7(JoyTypography);
+var Typography = (props) => {
+  return /* @__PURE__ */ React6.createElement(MotionTypography, { ...props });
+};
+Typography.displayName = "Typography";
+
+// src/components/Typography/index.ts
+var Typography_default = Typography;
+
+// src/components/DataTable/DataTable.tsx
+var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+function TablePagination(props) {
+  const {
+    paginationModel: { page, pageSize },
+    rowCount,
+    onPageChange
+  } = props;
+  const firstPage = 1;
+  const lastPage = Math.ceil(rowCount / pageSize);
+  const beforePages = [page - 2, page - 1].filter((p) => p > 1);
+  const afterPages = [page + 1, page + 2].filter((p) => p <= lastPage - 1);
+  const isMoreAfterPages = lastPage > 1 && page < lastPage - 3;
+  const isMoreBeforePages = lastPage > 1 && page > 4;
+  return /* @__PURE__ */ React7.createElement(
+    Stack_default,
+    {
+      direction: "row",
+      spacing: 1,
+      sx: {
+        pt: 1,
+        pb: 1
+      },
+      justifyContent: "end",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React7.createElement(Stack_default, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(page - 1),
+        disabled: page === firstPage,
+        "aria-label": "Previous page"
+      },
+      "<"
+    ), page !== firstPage && /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(firstPage)
+      },
+      firstPage
+    ), isMoreBeforePages && /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(page - 3)
+      },
+      "..."
+    ), beforePages.map((p) => /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        key: p,
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(p)
+      },
+      p
+    )), /* @__PURE__ */ React7.createElement(Button_default, { variant: "soft", size: "sm" }, page), afterPages.map((p) => /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        key: p,
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(p)
+      },
+      p
+    )), isMoreAfterPages && /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(page + 3)
+      },
+      "..."
+    ), page !== lastPage && /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(lastPage)
+      },
+      lastPage
+    ), /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "neutral",
+        onClick: () => onPageChange(page + 1),
+        disabled: page === lastPage,
+        "aria-label": "Next page"
+      },
+      ">"
+    ))
+  );
+}
+var Resizer = (ref) => /* @__PURE__ */ React7.createElement(
+  Box_default,
+  {
+    sx: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: "4px",
+      cursor: "col-resize"
+    },
+    onMouseDown: (e) => {
+      const initialX = e.clientX;
+      const initialWidth = ref.current?.getBoundingClientRect().width;
+      const onMouseMove = (e2) => {
+        if (initialWidth && initialX) {
+          ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
+        }
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    }
+  }
+);
+var HeadCell = (props) => {
+  const ref = useRef(null);
+  const style = {
+    width: props.width,
+    minWidth: props.minWidth ?? "50px",
+    maxWidth: props.maxWidth,
+    textAlign: props.type === "number" ? "end" : "start",
+    position: props.stickyHeader ? void 0 : "relative"
+  };
+  const resizer = props.resizable ?? true ? Resizer(ref) : null;
+  return /* @__PURE__ */ React7.createElement("th", { ref, key: props.field, style }, props.headerName ?? props.field, resizer);
+};
+function useDataTableRenderer({
+  rows,
+  columns,
+  rowCount: totalRowsProp,
+  paginationModel,
+  onPaginationModelChange,
+  selectionModel = [],
+  onSelectionModelChange,
+  stickyHeader
+}) {
+  const [page, setPage] = useState(paginationModel?.page || 1);
+  const pageSize = paginationModel?.pageSize || 20;
+  const selectedModelSet = useMemo(
+    () => new Set(selectionModel),
+    [selectionModel]
+  );
+  const dataInPage = useMemo(
+    () => rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
+    [rows, page, pageSize]
+  );
+  const isAllSelected = useMemo(
+    () => dataInPage.length > 0 && dataInPage.every(
+      (_, i) => selectedModelSet.has(`${i + (page - 1) * pageSize}`)
+    ),
+    [dataInPage, selectedModelSet, page, pageSize]
+  );
+  const rowCount = totalRowsProp || rows.length;
+  const isTotalSelected = useMemo(
+    () => rowCount > 0 && selectionModel.length === rowCount,
+    [selectionModel, rowCount]
+  );
+  const handlePageChange = useCallback(
+    (newPage) => {
+      setPage(newPage);
+      onPaginationModelChange?.({ page: newPage, pageSize });
+    },
+    [onPaginationModelChange]
+  );
+  useEffect(() => {
+    handlePageChange(1);
+  }, [rowCount]);
+  useEffect(() => {
+    if (page > Math.ceil(rowCount / pageSize)) {
+      handlePageChange(Math.ceil(rowCount / pageSize));
+    }
+  }, [rowCount, pageSize]);
+  useEffect(() => {
+    onSelectionModelChange?.([]);
+  }, [page]);
+  return {
+    rowCount,
+    page,
+    pageSize,
+    onPaginationModelChange: handlePageChange,
+    HeadCell,
+    // HeadCell: useCallback(
+    //   (column: Column<any>) => {
+    //     const ref = useRef<HTMLTableCellElement>(null);
+    //     const style = {
+    //       width: column.width,
+    //       minWidth: column.minWidth ?? "50px",
+    //       maxWidth: column.maxWidth,
+    //       textAlign: column.type === "number" ? "end" : "start",
+    //       position: stickyHeader ? undefined : "relative",
+    //     } as React.CSSProperties;
+    //     const resizer = column.resizable ?? true ? Resizer(ref) : null;
+    //     return (
+    //       <th ref={ref} key={column.field as string} style={style}>
+    //         {column.headerName ?? (column.field as string)}
+    //         {resizer}
+    //       </th>
+    //     );
+    //   },
+    //   [stickyHeader, columns]
+    // ),
+    dataInPage,
+    isAllSelected,
+    // all rows are selected on this page
+    isTotalSelected,
+    isSelectedRow: useCallback(
+      (model) => selectedModelSet.has(model),
+      [selectedModelSet]
+    ),
+    onAllCheckboxChange: useCallback(() => {
+      onSelectionModelChange?.(
+        isAllSelected ? [] : dataInPage.map((_, i) => `${i + (page - 1) * pageSize}`)
+      );
+    }, [isAllSelected, dataInPage, onSelectionModelChange]),
+    onCheckboxChange: useCallback(
+      (event, selectedModel) => {
+        if (selectedModelSet.has(selectedModel)) {
+          const newSelectionModel = selectionModel.filter(
+            (model) => model !== selectedModel
+          );
+          onSelectionModelChange?.(newSelectionModel);
+        } else {
+          const newSelectionModel = [...selectionModel, selectedModel];
+          onSelectionModelChange?.(newSelectionModel);
+        }
+      },
+      [selectionModel, onSelectionModelChange]
+    ),
+    columns: useMemo(
+      () => columns || // fallback
+      Object.keys(rows[0] || {}).map((key) => ({
+        field: key
+      })),
+      [rows, columns]
+    ),
+    onTotalSelect: useCallback(() => {
+      onSelectionModelChange?.(
+        isTotalSelected ? [] : rows.map((_, i) => `${i}`)
+      );
+    }, [isTotalSelected, rows, onSelectionModelChange])
+  };
+}
+function DataTable(props) {
+  const {
+    rows,
+    checkboxSelection,
+    selectionModel,
+    onSelectionModelChange,
+    rowCount: _,
+    // rowCount is used in useDataTableRenderer
+    columns: __,
+    // columns is used in useDataTableRenderer
+    onPaginationModelChange: ___,
+    // onPaginationModelChange is used in useDataTableRenderer
+    paginationModel,
+    slots: {
+      checkbox: RenderCheckbox = Checkbox_default,
+      toolbar: Toolbar,
+      footer: Footer
+    } = {},
+    slotProps: {
+      checkbox: checkboxProps = {},
+      toolbar: toolbarProps,
+      background: backgroundProps = {}
+    } = {},
+    ...innerProps
+  } = props;
+  const {
+    columns,
+    isAllSelected,
+    isSelectedRow,
+    onAllCheckboxChange,
+    onCheckboxChange,
+    rowCount,
+    page,
+    pageSize,
+    onPaginationModelChange,
+    dataInPage,
+    isTotalSelected,
+    onTotalSelect,
+    HeadCell: HeadCell2
+  } = useDataTableRenderer(props);
+  return /* @__PURE__ */ React7.createElement(Box_default, null, /* @__PURE__ */ React7.createElement(
+    Stack_default,
+    {
+      direction: "row",
+      sx: {
+        pt: 1,
+        pb: 1
+      },
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React7.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React7.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React7.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React7.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React7.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(rows.length), " items")), isTotalSelected && /* @__PURE__ */ React7.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React7.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(rows.length), " items are selected."), /* @__PURE__ */ React7.createElement(
+      Button_default,
+      {
+        size: "sm",
+        variant: "plain",
+        color: "danger",
+        onClick: onTotalSelect
+      },
+      "Cancel"
+    ))),
+    Toolbar && /* @__PURE__ */ React7.createElement(Toolbar, { ...toolbarProps || {} })
+  ), /* @__PURE__ */ React7.createElement(
+    Sheet_default,
+    {
+      variant: "outlined",
+      sx: {
+        overflow: "auto",
+        width: "100%",
+        boxShadow: "sm",
+        borderRadius: "sm"
+      },
+      ...backgroundProps
+    },
+    /* @__PURE__ */ React7.createElement(Table, { ...innerProps }, /* @__PURE__ */ React7.createElement("thead", null, /* @__PURE__ */ React7.createElement("tr", null, checkboxSelection && /* @__PURE__ */ React7.createElement(
+      "th",
+      {
+        style: {
+          width: "40px",
+          textAlign: "center"
+        }
+      },
+      /* @__PURE__ */ React7.createElement(
+        RenderCheckbox,
+        {
+          onChange: onAllCheckboxChange,
+          checked: isAllSelected,
+          indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+          ...checkboxProps
+        }
+      )
+    ), columns.map((c) => /* @__PURE__ */ React7.createElement(
+      HeadCell2,
+      {
+        key: c.field,
+        stickyHeader: props.stickyHeader,
+        ...c
+      }
+    )))), /* @__PURE__ */ React7.createElement("tbody", null, dataInPage.map((row, rowIndex) => {
+      const rowId = `${rowIndex + (page - 1) * pageSize}`;
+      return /* @__PURE__ */ React7.createElement(
+        "tr",
+        {
+          key: rowId,
+          role: checkboxSelection ? "checkbox" : void 0,
+          tabIndex: checkboxSelection ? -1 : void 0,
+          onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
+          "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0
+        },
+        checkboxSelection && /* @__PURE__ */ React7.createElement(
+          "th",
+          {
+            scope: "row",
+            style: {
+              textAlign: "center"
+            }
+          },
+          /* @__PURE__ */ React7.createElement(
+            RenderCheckbox,
+            {
+              onChange: (e) => onCheckboxChange(e, rowId),
+              checked: isSelectedRow(rowId),
+              ...checkboxProps
+            }
+          )
+        ),
+        columns.map((column) => /* @__PURE__ */ React7.createElement(
+          "td",
+          {
+            key: column.field,
+            style: {
+              textAlign: column.type === "number" ? "end" : "start"
+            }
+          },
+          row[column.field]
+        ))
+      );
+    })), Footer && /* @__PURE__ */ React7.createElement(Footer, null))
+  ), /* @__PURE__ */ React7.createElement(
+    TablePagination,
+    {
+      paginationModel: { page, pageSize },
+      rowCount,
+      onPageChange: onPaginationModelChange
+    }
+  ));
+}
+DataTable.displayName = "DataTable";
+
+// src/components/DialogActions/DialogActions.tsx
+import { DialogActions as JoyDialogActions } from "@mui/joy";
+import { motion as motion8 } from "framer-motion";
+var MotionDialogActions = motion8(JoyDialogActions);
+var DialogActions = MotionDialogActions;
+DialogActions.displayName = "DialogActions";
+
+// src/components/DialogActions/index.ts
+var DialogActions_default = DialogActions;
+
+// src/components/DialogContent/DialogContent.tsx
+import { DialogContent as JoyDialogContent } from "@mui/joy";
+import { motion as motion9 } from "framer-motion";
+var MotionDialogContent = motion9(JoyDialogContent);
+var DialogContent = MotionDialogContent;
+DialogContent.displayName = "DialogContent";
+
+// src/components/DialogContent/index.ts
+var DialogContent_default = DialogContent;
+
+// src/components/DialogTitle/DialogTitle.tsx
+import { DialogTitle as JoyDialogTitle } from "@mui/joy";
+import { motion as motion10 } from "framer-motion";
+var MotionDialogTitle = motion10(JoyDialogTitle);
+var DialogTitle = MotionDialogTitle;
+DialogTitle.displayName = "DialogTitle";
+
+// src/components/DialogTitle/index.ts
+var DialogTitle_default = DialogTitle;
+
+// src/components/DialogFrame/DialogFrame.tsx
+import React9 from "react";
+
+// src/components/Modal/Modal.tsx
+import React8 from "react";
+import {
+  Modal as JoyModal,
+  ModalDialog as JoyModalDialog,
+  ModalClose as JoyModalClose,
+  ModalOverflow as JoyModalOverflow
+} from "@mui/joy";
+import { motion as motion11 } from "framer-motion";
+var MotionModal = motion11(JoyModal);
+var Modal = MotionModal;
+Modal.displayName = "Modal";
+var MotionModalDialog = motion11(JoyModalDialog);
+var ModalDialog = MotionModalDialog;
+ModalDialog.displayName = "ModalDialog";
+var MotionModalClose = motion11(JoyModalClose);
+var ModalClose = MotionModalClose;
+ModalClose.displayName = "ModalClose";
+var MotionModalOverflow = motion11(JoyModalOverflow);
+var ModalOverflow = MotionModalOverflow;
+ModalOverflow.displayName = "ModalOverflow";
+function ModalFrame(props) {
+  const { title, children, ...innerProps } = props;
+  return /* @__PURE__ */ React8.createElement(ModalDialog, { ...innerProps }, /* @__PURE__ */ React8.createElement(ModalClose, null), /* @__PURE__ */ React8.createElement(DialogTitle_default, null, title), /* @__PURE__ */ React8.createElement(DialogContent_default, null, children));
+}
+ModalFrame.displayName = "ModalFrame";
+
+// src/components/DialogFrame/DialogFrame.tsx
+function DialogFrame(props) {
+  const { title, children, actions, ...innerProps } = props;
+  return /* @__PURE__ */ React9.createElement(ModalDialog, { ...innerProps }, /* @__PURE__ */ React9.createElement(DialogTitle_default, null, title), /* @__PURE__ */ React9.createElement(DialogContent_default, null, children), /* @__PURE__ */ React9.createElement(DialogActions_default, null, actions));
+}
+DialogFrame.displayName = "DialogFrame";
+
+// src/components/Divider/Divider.tsx
+import React10 from "react";
+import { Divider as JoyDivider } from "@mui/joy";
+import { motion as motion12 } from "framer-motion";
+var MotionDivider = motion12(JoyDivider);
+var Divider = (props) => {
+  return /* @__PURE__ */ React10.createElement(MotionDivider, { ...props });
+};
+Divider.displayName = "Divider";
+
+// src/components/InsetDrawer/InsetDrawer.tsx
+import React11 from "react";
+import { Drawer as JoyDrawer } from "@mui/joy";
+import { motion as motion13 } from "framer-motion";
+var MotionDrawer = motion13(JoyDrawer);
+var InsetDrawer = (props) => {
+  const { children, ...innerProps } = props;
+  return /* @__PURE__ */ React11.createElement(
+    MotionDrawer,
+    {
+      ...innerProps,
+      slotProps: {
+        ...innerProps.slotProps,
+        content: {
+          ...innerProps.slotProps?.content,
+          sx: {
+            bgcolor: "transparent",
+            p: { md: 3, sm: 0 },
+            boxShadow: "none"
+          }
+        }
+      }
+    },
+    children
+  );
+};
+InsetDrawer.displayName = "InsetDrawer";
+
+// src/components/Dropdown/Dropdown.tsx
+import { Dropdown as JoyDropdown } from "@mui/joy";
+import { motion as motion14 } from "framer-motion";
+var MotionDropdown = motion14(JoyDropdown);
+var Dropdown = MotionDropdown;
+Dropdown.displayName = "Dropdown";
+
+// src/components/FormControl/FormControl.tsx
+import { FormControl as JoyFormControl } from "@mui/joy";
+import { motion as motion15 } from "framer-motion";
+var MotionFormControl = motion15(JoyFormControl);
+var FormControl = MotionFormControl;
+FormControl.displayName = "FormControl";
+
+// src/components/FormHelperText/FormHelperText.tsx
+import { FormHelperText as JoyFormHelperText } from "@mui/joy";
+import { motion as motion16 } from "framer-motion";
+var MotionFormHelperText = motion16(JoyFormHelperText);
+var FormHelperText = MotionFormHelperText;
+FormHelperText.displayName = "FormHelperText";
+
+// src/components/FormLabel/FormLabel.tsx
+import { FormLabel as JoyFormLabel } from "@mui/joy";
+import { motion as motion17 } from "framer-motion";
+var MotionFormLabel = motion17(JoyFormLabel);
+var FormLabel = MotionFormLabel;
+FormLabel.displayName = "FormLabel";
+
+// src/components/Grid/Grid.tsx
+import { Grid as JoyGrid } from "@mui/joy";
+import { motion as motion18 } from "framer-motion";
+var MotionGrid = motion18(JoyGrid);
+var Grid = MotionGrid;
+Grid.displayName = "Grid";
+
+// src/components/IconButton/IconButton.tsx
+import React12 from "react";
+import { IconButton as JoyIconButton } from "@mui/joy";
+import { motion as motion19 } from "framer-motion";
+var MotionIconButton = motion19(JoyIconButton);
+var IconButton = (props) => {
+  return /* @__PURE__ */ React12.createElement(MotionIconButton, { ...props });
+};
+IconButton.displayName = "IconButton";
+
+// src/components/Input/Input.tsx
+import React13 from "react";
+import { Input as JoyInput } from "@mui/joy";
+import { motion as motion20 } from "framer-motion";
+var MotionInput = motion20(JoyInput);
+var Input = (props) => {
+  return /* @__PURE__ */ React13.createElement(MotionInput, { ...props });
+};
+Input.displayName = "Input";
+
+// src/components/Menu/Menu.tsx
+import React14 from "react";
+import {
+  Menu as JoyMenu,
+  MenuButton as JoyMenuButton,
+  MenuItem as JoyMenuItem
+} from "@mui/joy";
+import { motion as motion21 } from "framer-motion";
+var MotionMenu = motion21(JoyMenu);
+var Menu = (props) => {
+  return /* @__PURE__ */ React14.createElement(MotionMenu, { ...props });
+};
+Menu.displayName = "Menu";
+var MotionMenuButton = motion21(JoyMenuButton);
+var MenuButton = (props) => {
+  return /* @__PURE__ */ React14.createElement(MotionMenuButton, { ...props });
+};
+MenuButton.displayName = "MenuButton";
+var MotionMenuItem = motion21(JoyMenuItem);
+var MenuItem = (props) => {
+  return /* @__PURE__ */ React14.createElement(MotionMenuItem, { ...props });
+};
+MenuItem.displayName = "MenuItem";
+
+// src/components/Radio/Radio.tsx
+import { Radio as JoyRadio, RadioGroup as JoyRadioGroup } from "@mui/joy";
+import { motion as motion22 } from "framer-motion";
+var MotionRadio = motion22(JoyRadio);
+var Radio = MotionRadio;
+Radio.displayName = "Radio";
+var MotionRadioGroup = motion22(JoyRadioGroup);
+var RadioGroup = MotionRadioGroup;
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/RadioList/RadioList.tsx
+import React15 from "react";
+function RadioList(props) {
+  const { items, ...innerProps } = props;
+  return /* @__PURE__ */ React15.createElement(RadioGroup, { ...innerProps }, items.map((item) => /* @__PURE__ */ React15.createElement(Radio, { key: `${item.value}`, value: item.value, label: item.label })));
+}
+RadioList.displayName = "RadioList";
+
+// src/components/Select/Select.tsx
+import { Select as JoySelect, Option as JoyOption } from "@mui/joy";
+import { motion as motion23 } from "framer-motion";
+var MotionSelect = motion23(JoySelect);
+var Select = MotionSelect;
+Select.displayName = "Select";
+var MotionOption = motion23(JoyOption);
+var Option = MotionOption;
+Option.displayName = "Option";
+
+// src/components/Switch/Switch.tsx
+import React16 from "react";
+import {
+  Switch as JoySwitch,
+  styled as styled2,
+  switchClasses
+} from "@mui/joy";
+import { motion as motion24 } from "framer-motion";
+var MotionSwitch = motion24(JoySwitch);
+var StyledThumb = styled2(motion24.div)({
+  "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
+  display: "inline-flex",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "absolute",
+  left: "var(--Switch-thumbOffset)",
+  width: "var(--Switch-thumbWidth)",
+  height: "var(--Switch-thumbSize)",
+  borderRadius: "var(--Switch-thumbRadius)",
+  boxShadow: "var(--Switch-thumbShadow)",
+  color: "var(--Switch-thumbColor)",
+  backgroundColor: "var(--Switch-thumbBackground)",
+  [`&.${switchClasses.checked}`]: {
+    left: "unset",
+    right: "var(--Switch-thumbOffset)"
+  }
+});
+var Thumb = (props) => /* @__PURE__ */ React16.createElement(StyledThumb, { ...props, layout: true, transition: spring });
+var spring = {
+  type: "spring",
+  stiffness: 700,
+  damping: 30
+};
+var Switch = (props) => {
+  return /* @__PURE__ */ React16.createElement(
+    MotionSwitch,
+    {
+      ...props,
+      slots: {
+        thumb: Thumb,
+        ...props.slots
+      }
+    }
+  );
+};
+Switch.displayName = "Switch";
+
+// src/components/Tabs/Tabs.tsx
+import { Tabs as JoyTabs, Tab as JoyTab, TabList as JoyTabList, TabPanel as JoyTabPanel } from "@mui/joy";
+import { motion as motion25 } from "framer-motion";
+var MotionTabs = motion25(JoyTabs);
+var Tabs = MotionTabs;
+Tabs.displayName = "Tabs";
+var MotionTab = motion25(JoyTab);
+var Tab = MotionTab;
+Tab.displayName = "Tab";
+var MotionTabList = motion25(JoyTabList);
+var TabList = MotionTabList;
+TabList.displayName = "TabList";
+var MotionTabPanel = motion25(JoyTabPanel);
+var TabPanel = MotionTabPanel;
+TabPanel.displayName = "TabPanel";
+
+// src/components/Textarea/Textarea.tsx
+import React17 from "react";
+import { Textarea as JoyTextarea } from "@mui/joy";
+import { motion as motion26 } from "framer-motion";
+var MotionTextarea = motion26(JoyTextarea);
+var Textarea = (props) => {
+  return /* @__PURE__ */ React17.createElement(MotionTextarea, { ...props });
+};
+Textarea.displayName = "Textarea";
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+import React18 from "react";
+import {
+  CssBaseline,
+  CssVarsProvider,
+  checkboxClasses,
+  extendTheme
+} from "@mui/joy";
+var defaultTheme = extendTheme({
+  cssVarPrefix: "ceed",
+  components: {
+    JoyTable: {
+      defaultProps: {
+        size: "sm",
+        borderAxis: "bothBetween"
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "--TableRow-stripeBackground": theme.palette.background.level1,
+          "--TableCell-selectedBackground": theme.palette.background.level2,
+          "--TableRow-hoverBackground": theme.palette.background.level3,
+          "& tbody tr[aria-checked=false] th": {
+            "--TableCell-headBackground": "transparent"
+          },
+          "& tbody tr[aria-checked=true]:hover th": {
+            "--TableCell-headBackground": "var(--TableRow-hoverBackground)"
+          },
+          [`& tbody tr[aria-checked=true]:not(:hover) th`]: {
+            "--TableCell-headBackground": "var(--TableCell-selectedBackground)"
+          },
+          [`& tbody tr[aria-checked=true]:not(:hover) td`]: {
+            "--TableCell-dataBackground": "var(--TableCell-selectedBackground)"
+          },
+          [`& .${checkboxClasses.root}`]: {
+            verticalAlign: "middle"
+          }
+        })
+      }
+    },
+    JoyTooltip: {
+      defaultProps: {
+        size: "sm",
+        placement: "top"
+      }
+    }
+  }
+});
+function ThemeProvider(props) {
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(CssVarsProvider, { theme: defaultTheme }, /* @__PURE__ */ React18.createElement(CssBaseline, null), props.children));
+}
+ThemeProvider.displayName = "ThemeProvider";
+
+// src/components/Tooltip/Tooltip.tsx
+import React19 from "react";
+import { Tooltip as JoyTooltip } from "@mui/joy";
+import { motion as motion27 } from "framer-motion";
+var MotionTooltip = motion27(JoyTooltip);
+var Tooltip = (props) => {
+  return /* @__PURE__ */ React19.createElement(MotionTooltip, { ...props });
+};
+Tooltip.displayName = "Tooltip";
+export {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Accordions,
+  AspectRatio,
+  Autocomplete,
+  AutocompleteListbox,
+  AutocompleteOption,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Box,
+  Breadcrumbs,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardCover,
+  CardOverflow,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Container,
+  DataTable,
+  DialogActions,
+  DialogContent,
+  DialogFrame,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Dropdown,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  IconButton,
+  Input,
+  InsetDrawer,
+  LinearProgress,
+  Link,
+  List,
+  ListDivider,
+  ListItem,
+  ListItemButton,
+  ListItemContent,
+  ListItemDecorator,
+  ListSubheader,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Modal,
+  ModalClose,
+  ModalDialog,
+  ModalFrame,
+  ModalOverflow,
+  Option,
+  Radio,
+  RadioGroup,
+  RadioList,
+  Select,
+  Sheet,
+  Skeleton,
+  Slider,
+  Stack,
+  Step,
+  StepButton,
+  StepIndicator,
+  Stepper,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Table,
+  TableBody,
+  TableHead,
+  Tabs,
+  Textarea,
+  ThemeProvider,
+  Tooltip,
+  Typography,
+  accordionClasses,
+  accordionDetailsClasses,
+  accordionSummaryClasses,
+  accordionGroupClasses as accordionsClasses,
+  aspectRatioClasses,
+  autocompleteClasses,
+  autocompleteListboxClasses,
+  autocompleteOptionClasses,
+  avatarClasses,
+  avatarGroupClasses,
+  badgeClasses,
+  boxClasses,
+  breadcrumbsClasses,
+  buttonClasses,
+  cardActionsClasses,
+  cardClasses,
+  cardContentClasses,
+  cardCoverClasses,
+  cardOverflowClasses,
+  checkboxClasses2 as checkboxClasses,
+  chipClasses,
+  circularProgressClasses,
+  dialogActionsClasses,
+  dialogContentClasses,
+  dialogTitleClasses,
+  dividerClasses,
+  drawerClasses,
+  formControlClasses,
+  formHelperTextClasses,
+  formLabelClasses,
+  gridClasses,
+  iconButtonClasses,
+  inputClasses,
+  linearProgressClasses,
+  linkClasses,
+  listClasses,
+  listDividerClasses,
+  listItemButtonClasses,
+  listItemClasses,
+  listItemContentClasses,
+  listItemDecoratorClasses,
+  listSubheaderClasses,
+  menuButtonClasses,
+  menuClasses,
+  menuItemClasses,
+  modalClasses,
+  modalCloseClasses,
+  modalDialogClasses,
+  modalOverflowClasses,
+  optionClasses,
+  radioClasses,
+  radioGroupClasses,
+  selectClasses,
+  sheetClasses,
+  skeletonClasses,
+  sliderClasses,
+  stackClasses,
+  stepButtonClasses,
+  stepClasses,
+  stepperClasses,
+  switchClasses2 as switchClasses,
+  tabListClasses,
+  tabPanelClasses,
+  tableClasses,
+  tabsClasses,
+  textareaClasses,
+  tooltipClasses,
+  typographyClasses
+};