@ceed/ads 0.0.78 → 0.0.80

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,19 @@
 import React from "react";
 import { BreadcrumbsProps } from "@mui/joy";
 declare function Breadcrumbs(props: {
-    crumbs: React.ReactElement[];
-    collapsed?: boolean;
+    crumbs: {
+        type: "text" | "link";
+        label: string;
+        linkHref?: string;
+    }[];
+    frontCrumbCounts?: number;
+    backCrumbCounts?: number;
+    slots?: {
+        link?: React.ElementType;
+    } & BreadcrumbsProps["slots"];
+    slotProps?: {
+        link?: {};
+    } & BreadcrumbsProps["slotProps"];
 } & BreadcrumbsProps): React.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;

package/dist/components/Modal/Modal.d.ts

@@ -6,7 +6,7 @@ declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mu
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "children" | "container" | "sx" | "onClose" | "open" | "disablePortal" | "keepMounted" | "disableAutoFocus" | "disableEnforceFocus" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableScrollLock" | "hideBackdrop" | keyof import("@mui/joy").ModalSlotsAndSlotProps>>;
 export { Modal };
-declare const ModalDialog: import("framer-motion").CustomDomComponent<{
+declare const ModalDialog: import("@emotion/styled").StyledComponent<Omit<{
     children?: React.ReactNode;
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ModalDialogPropsColorOverrides> | undefined;
     invertedColors?: boolean | undefined;
@@ -19,7 +19,7 @@ declare const ModalDialog: import("framer-motion").CustomDomComponent<{
     variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").ModalDialogPropsVariantOverrides> | undefined;
 } & import("@mui/joy").ModalDialogSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "layout" | "color" | "maxWidth" | "minWidth" | "variant" | "sx" | "size" | "orientation" | "invertedColors" | keyof import("@mui/joy").ModalDialogSlotsAndSlotProps>>;
+}, "children" | "layout" | "color" | "maxWidth" | "minWidth" | "variant" | "sx" | "size" | "orientation" | "invertedColors" | keyof import("@mui/joy").ModalDialogSlotsAndSlotProps> & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, {}, {}>;
 export { ModalDialog };
 declare const ModalClose: import("framer-motion").CustomDomComponent<{
     color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").ModalClosePropsColorOverrides> | undefined;

package/dist/components/Stack/Stack.d.ts

@@ -8,5 +8,5 @@ declare const Stack: import("framer-motion").CustomDomComponent<{
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").StackSlotsAndSlotProps & import("@mui/joy/styles/types").SystemProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "direction" | "sx" | ("p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "spacing" | "divider" | "useFlexGap" | keyof import("@mui/joy").StackSlotsAndSlotProps>>;
+}, "children" | "direction" | "sx" | ("p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing" | "useFlexGap" | keyof import("@mui/joy").StackSlotsAndSlotProps>>;
 export { Stack };

package/dist/index.js

@@ -222,8 +222,11 @@ Box.displayName = "Box";
 var Box_default = Box;
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import React4 from "react";
-import { Breadcrumbs as JoyBreadcrumbs } from "@mui/joy";
+import React5 from "react";
+import {
+  Breadcrumbs as JoyBreadcrumbs,
+  Link as JoyLink
+} from "@mui/joy";
 
 // src/components/Menu/Menu.tsx
 import React3 from "react";
@@ -262,25 +265,67 @@ Dropdown.displayName = "Dropdown";
 // src/components/Dropdown/index.ts
 var Dropdown_default = Dropdown;
 
+// src/components/Typography/Typography.tsx
+import React4 from "react";
+import { Typography as JoyTypography } from "@mui/joy";
+import { motion as motion8 } from "framer-motion";
+var MotionTypography = motion8(JoyTypography);
+var Typography = (props) => {
+  return /* @__PURE__ */ React4.createElement(MotionTypography, { ...props });
+};
+Typography.displayName = "Typography";
+
+// src/components/Typography/index.ts
+var Typography_default = Typography;
+
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var MAX_CRUMBS = 4;
 function Breadcrumbs(props) {
-  const { crumbs, collapsed, size, ...innerProps } = props;
-  const firstCrumb = crumbs[0];
-  const restCrumbs = crumbs.length < MAX_CRUMBS ? crumbs.slice(1) : crumbs.slice(-(MAX_CRUMBS - 1));
-  const collapsingCrumbs = crumbs.slice(1, -(MAX_CRUMBS - 1));
-  return /* @__PURE__ */ React4.createElement(JoyBreadcrumbs, { size, ...innerProps }, firstCrumb, collapsingCrumbs.length && (collapsed ? /* @__PURE__ */ React4.createElement(Dropdown_default, null, /* @__PURE__ */ React4.createElement(MenuButton, { size, variant: "plain", color: "neutral" }, "\u2022\u2022\u2022"), /* @__PURE__ */ React4.createElement(Menu_default, null, collapsingCrumbs.map((crumb) => /* @__PURE__ */ React4.createElement(MenuItem, null, crumb)))) : collapsingCrumbs), restCrumbs);
+  const {
+    crumbs,
+    size,
+    frontCrumbCounts = 1,
+    backCrumbCounts = 3,
+    slots: { link: Link2, ...restSlots } = { link: JoyLink },
+    slotProps: { link: linkProps, ...restSlotProps } = {
+      link: { color: "neutral" }
+    },
+    ...innerProps
+  } = props;
+  const _backCrumbCounts = Math.max(1, backCrumbCounts);
+  const Crumb = (props2) => {
+    if (props2.type === "link" && Link2) {
+      return /* @__PURE__ */ React5.createElement(Link2, { to: props2.linkHref, href: props2.linkHref, ...linkProps }, props2.label);
+    } else {
+      return /* @__PURE__ */ React5.createElement(Typography_default, null, props2.label);
+    }
+  };
+  const frontCrumbs = crumbs.slice(0, frontCrumbCounts).map((crumb) => /* @__PURE__ */ React5.createElement(Crumb, { ...crumb }));
+  const backCrumbs = (frontCrumbCounts + _backCrumbCounts > crumbs.length ? crumbs.slice(frontCrumbCounts) : crumbs.slice(-_backCrumbCounts)).map((crumb) => /* @__PURE__ */ React5.createElement(Crumb, { ...crumb }));
+  const collapsedCrumbs = crumbs.slice(frontCrumbCounts, -_backCrumbCounts).map((crumb) => /* @__PURE__ */ React5.createElement(MenuItem, null, /* @__PURE__ */ React5.createElement(Crumb, { ...crumb })));
+  console.log(collapsedCrumbs);
+  return /* @__PURE__ */ React5.createElement(
+    JoyBreadcrumbs,
+    {
+      size,
+      slots: restSlots,
+      slotProps: restSlotProps,
+      ...innerProps
+    },
+    frontCrumbs,
+    collapsedCrumbs.length && /* @__PURE__ */ React5.createElement(Dropdown_default, null, /* @__PURE__ */ React5.createElement(MenuButton, { variant: "plain" }, "..."), /* @__PURE__ */ React5.createElement(Menu_default, null, collapsedCrumbs)),
+    backCrumbs
+  );
 }
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Button/Button.tsx
-import React5, { forwardRef } from "react";
+import React6, { forwardRef } from "react";
 import { Button as JoyButton } from "@mui/joy";
-import { motion as motion8 } from "framer-motion";
-var MotionButton = motion8(JoyButton);
+import { motion as motion9 } from "framer-motion";
+var MotionButton = motion9(JoyButton);
 var Button = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(
       MotionButton,
       {
         ref,
@@ -301,19 +346,6 @@ import ChevronLeftIcon from "@mui/icons-material/esm/ChevronLeft.js";
 import ChevronRightIcon from "@mui/icons-material/esm/ChevronRight.js";
 import { AnimatePresence, motion as motion11 } from "framer-motion";
 
-// src/components/Typography/Typography.tsx
-import React6 from "react";
-import { Typography as JoyTypography } from "@mui/joy";
-import { motion as motion9 } from "framer-motion";
-var MotionTypography = motion9(JoyTypography);
-var Typography = (props) => {
-  return /* @__PURE__ */ React6.createElement(MotionTypography, { ...props });
-};
-Typography.displayName = "Typography";
-
-// src/components/Typography/index.ts
-var Typography_default = Typography;
-
 // src/components/Calendar/utils/index.ts
 var getCalendarDates = (date) => {
   const dates = [];
@@ -1527,7 +1559,7 @@ function DataTable(props) {
       justifyContent: "space-between",
       alignItems: "center"
     },
-    /* @__PURE__ */ React13.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React13.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React13.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(rowCount ?? rows.length), " items")), isTotalSelected && /* @__PURE__ */ React13.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(rowCount ?? rows.length), " items are selected."), /* @__PURE__ */ React13.createElement(
+    !!checkboxSelection && /* @__PURE__ */ React13.createElement(Stack_default, { direction: "row", spacing: 1 }, !isAllSelected && /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs" }, numberFormatter(selectionModel?.length || 0), " items selected"), isAllSelected && !isTotalSelected && /* @__PURE__ */ React13.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(selectionModel?.length || 0), " items on this page are selected."), /* @__PURE__ */ React13.createElement(Button_default, { size: "sm", variant: "plain", onClick: onTotalSelect }, "Select all ", numberFormatter(rowCount ?? rows.length), " items")), isTotalSelected && /* @__PURE__ */ React13.createElement(Stack_default, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React13.createElement(Typography_default, { level: "body-xs" }, "All ", numberFormatter(rowCount ?? rows.length), " items are selected."), /* @__PURE__ */ React13.createElement(
       Button_default,
       {
         size: "sm",
@@ -1844,7 +1876,8 @@ var DatePicker = forwardRef4(
               offset: [4, 4]
             }
           }
-        ]
+        ],
+        disablePortal: true
       },
       /* @__PURE__ */ React15.createElement(FocusTrap, { open: true }, /* @__PURE__ */ React15.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React15.createElement(
         Calendar_default,
@@ -2066,7 +2099,8 @@ var DateRangePicker = forwardRef5(
               offset: [4, 4]
             }
           }
-        ]
+        ],
+        disablePortal: true
       },
       /* @__PURE__ */ React16.createElement(FocusTrap2, { open: true }, /* @__PURE__ */ React16.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React16.createElement(
         Calendar_default,
@@ -2144,14 +2178,18 @@ import {
   Modal as JoyModal,
   ModalDialog as JoyModalDialog,
   ModalClose as JoyModalClose,
-  ModalOverflow as JoyModalOverflow
+  ModalOverflow as JoyModalOverflow,
+  styled as styled9
 } from "@mui/joy";
 import { motion as motion19 } from "framer-motion";
 var MotionModal = motion19(JoyModal);
 var Modal = MotionModal;
 Modal.displayName = "Modal";
 var MotionModalDialog = motion19(JoyModalDialog);
-var ModalDialog = MotionModalDialog;
+var StyledModalDialog = styled9(MotionModalDialog)({
+  padding: 0
+});
+var ModalDialog = StyledModalDialog;
 ModalDialog.displayName = "ModalDialog";
 var MotionModalClose = motion19(JoyModalClose);
 var ModalClose = MotionModalClose;
@@ -2161,13 +2199,13 @@ var ModalOverflow = MotionModalOverflow;
 ModalOverflow.displayName = "ModalOverflow";
 function ModalFrame(props) {
   const { title, children, ...innerProps } = props;
-  return /* @__PURE__ */ React17.createElement(ModalDialog, { ...innerProps }, /* @__PURE__ */ React17.createElement(ModalClose, null), /* @__PURE__ */ React17.createElement(DialogTitle_default, null, title), /* @__PURE__ */ React17.createElement(DialogContent_default, null, children));
+  return /* @__PURE__ */ React17.createElement(StyledModalDialog, { ...innerProps }, /* @__PURE__ */ React17.createElement(ModalClose, null), /* @__PURE__ */ React17.createElement(DialogTitle_default, null, title), /* @__PURE__ */ React17.createElement(DialogContent_default, null, children));
 }
 ModalFrame.displayName = "ModalFrame";
 
 // src/components/DialogFrame/DialogFrame.tsx
-import { styled as styled9 } from "@mui/joy";
-var StyledDialogFrame = styled9(ModalDialog)(({ theme }) => ({
+import { styled as styled10 } from "@mui/joy";
+var StyledDialogFrame = styled10(ModalDialog)(({ theme }) => ({
   padding: 0
 }));
 function DialogFrame(props) {
@@ -2225,15 +2263,15 @@ Grid.displayName = "Grid";
 import React21, { forwardRef as forwardRef6, useCallback as useCallback6, useMemo as useMemo5, useState as useState6 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/esm/CalendarToday.js";
-import { styled as styled10 } from "@mui/joy";
+import { styled as styled11 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper3 } from "@mui/base";
-var StyledPopper3 = styled10(Popper3, {
+var StyledPopper3 = styled11(Popper3, {
   name: "MonthRangePicker",
   slot: "popper"
 })(({ theme }) => ({
   zIndex: theme.zIndex.popup
 }));
-var CalendarSheet3 = styled10(Sheet_default, {
+var CalendarSheet3 = styled11(Sheet_default, {
   name: "MonthRangePicker",
   slot: "sheet",
   overridesResolver: (props, styles) => styles.root
@@ -2370,7 +2408,8 @@ var MonthRangePicker = forwardRef6(
               offset: [4, 4]
             }
           }
-        ]
+        ],
+        disablePortal: true
       },
       /* @__PURE__ */ React21.createElement(FocusTrap3, { open: true }, /* @__PURE__ */ React21.createElement(CalendarSheet3, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React21.createElement(
         Calendar_default,
@@ -2486,12 +2525,12 @@ Select.displayName = "Select";
 import React24 from "react";
 import {
   Switch as JoySwitch,
-  styled as styled11,
+  styled as styled12,
   switchClasses
 } from "@mui/joy";
 import { motion as motion25 } from "framer-motion";
 var MotionSwitch = motion25(JoySwitch);
-var StyledThumb = styled11(motion25.div)({
+var StyledThumb = styled12(motion25.div)({
   "--Icon-fontSize": "calc(var(--Switch-thumbSize) * 0.75)",
   display: "inline-flex",
   justifyContent: "center",

package/framer/index.js

@@ -1279,6 +1279,10 @@ var require_react_is3 = __commonJS({
   }
 });
 
+// src/framer-entrypoint.ts
+import { ControlType as ControlType28 } from "framer";
+import React181 from "react";
+
 // ../../node_modules/@mui/joy/colors/colors.js
 var colors = {
   grey: {
@@ -34726,28 +34730,73 @@ Dropdown2.displayName = "Dropdown";
 // src/components/Dropdown/index.ts
 var Dropdown_default = Dropdown2;
 
+// src/components/Typography/Typography.tsx
+import { motion as motion8 } from "framer-motion";
+var MotionTypography = motion8(Typography_default);
+var Typography3 = (props) => {
+  return /* @__PURE__ */ jsx2(MotionTypography, __spreadValues({}, props));
+};
+Typography3.displayName = "Typography";
+
+// src/components/Typography/index.ts
+var Typography_default2 = Typography3;
+
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var MAX_CRUMBS = 4;
 function Breadcrumbs3(props) {
-  const _a = props, { crumbs, collapsed, size } = _a, innerProps = __objRest(_a, ["crumbs", "collapsed", "size"]);
-  const firstCrumb = crumbs[0];
-  const restCrumbs = crumbs.length < MAX_CRUMBS ? crumbs.slice(1) : crumbs.slice(-(MAX_CRUMBS - 1));
-  const collapsingCrumbs = crumbs.slice(1, -(MAX_CRUMBS - 1));
-  return /* @__PURE__ */ jsxs2(Breadcrumbs_default, __spreadProps(__spreadValues({ size }, innerProps), { children: [
-    firstCrumb,
-    collapsingCrumbs.length && (collapsed ? /* @__PURE__ */ jsxs2(Dropdown_default, { children: [
-      /* @__PURE__ */ jsx2(MenuButton3, { size, variant: "plain", color: "neutral", children: "\u2022\u2022\u2022" }),
-      /* @__PURE__ */ jsx2(Menu_default2, { children: collapsingCrumbs.map((crumb) => /* @__PURE__ */ jsx2(MenuItem3, { children: crumb })) })
-    ] }) : collapsingCrumbs),
-    restCrumbs
-  ] }));
+  const _a = props, {
+    crumbs,
+    size,
+    frontCrumbCounts = 1,
+    backCrumbCounts = 3,
+    slots: _b = { link: Link_default }
+  } = _a, _c = _b, { link: Link3 } = _c, restSlots = __objRest(_c, ["link"]), _d = _a, {
+    slotProps: _e = {
+      link: { color: "neutral" }
+    }
+  } = _d, _f = _e, { link: linkProps } = _f, restSlotProps = __objRest(_f, ["link"]), innerProps = __objRest(_d, [
+    "crumbs",
+    "size",
+    "frontCrumbCounts",
+    "backCrumbCounts",
+    "slots",
+    "slotProps"
+  ]);
+  const _backCrumbCounts = Math.max(1, backCrumbCounts);
+  const Crumb = (props2) => {
+    if (props2.type === "link" && Link3) {
+      return /* @__PURE__ */ jsx2(Link3, __spreadProps(__spreadValues({ to: props2.linkHref, href: props2.linkHref }, linkProps), { children: props2.label }));
+    } else {
+      return /* @__PURE__ */ jsx2(Typography_default2, { children: props2.label });
+    }
+  };
+  const frontCrumbs = crumbs.slice(0, frontCrumbCounts).map((crumb) => /* @__PURE__ */ jsx2(Crumb, __spreadValues({}, crumb)));
+  const backCrumbs = (frontCrumbCounts + _backCrumbCounts > crumbs.length ? crumbs.slice(frontCrumbCounts) : crumbs.slice(-_backCrumbCounts)).map((crumb) => /* @__PURE__ */ jsx2(Crumb, __spreadValues({}, crumb)));
+  const collapsedCrumbs = crumbs.slice(frontCrumbCounts, -_backCrumbCounts).map((crumb) => /* @__PURE__ */ jsx2(MenuItem3, { children: /* @__PURE__ */ jsx2(Crumb, __spreadValues({}, crumb)) }));
+  console.log(collapsedCrumbs);
+  return /* @__PURE__ */ jsxs2(
+    Breadcrumbs_default,
+    __spreadProps(__spreadValues({
+      size,
+      slots: restSlots,
+      slotProps: restSlotProps
+    }, innerProps), {
+      children: [
+        frontCrumbs,
+        collapsedCrumbs.length && /* @__PURE__ */ jsxs2(Dropdown_default, { children: [
+          /* @__PURE__ */ jsx2(MenuButton3, { variant: "plain", children: "..." }),
+          /* @__PURE__ */ jsx2(Menu_default2, { children: collapsedCrumbs })
+        ] }),
+        backCrumbs
+      ]
+    })
+  );
 }
 Breadcrumbs3.displayName = "Breadcrumbs";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef79 } from "react";
-import { motion as motion8 } from "framer-motion";
-var MotionButton = motion8(Button_default);
+import { motion as motion9 } from "framer-motion";
+var MotionButton = motion9(Button_default);
 var Button3 = forwardRef79(
   (props, ref) => {
     return /* @__PURE__ */ jsx2(
@@ -35713,17 +35762,6 @@ var ChevronRight_default = createSvgIcon2(/* @__PURE__ */ _jsx105("path", {
 // src/components/Calendar/Calendar.tsx
 import { AnimatePresence, motion as motion11 } from "framer-motion";
 
-// src/components/Typography/Typography.tsx
-import { motion as motion9 } from "framer-motion";
-var MotionTypography = motion9(Typography_default);
-var Typography3 = (props) => {
-  return /* @__PURE__ */ jsx2(MotionTypography, __spreadValues({}, props));
-};
-Typography3.displayName = "Typography";
-
-// src/components/Typography/index.ts
-var Typography_default2 = Typography3;
-
 // src/components/Calendar/utils/index.ts
 var getCalendarDates = (date) => {
   const dates = [];
@@ -37010,7 +37048,7 @@ function DataTable(props) {
         justifyContent: "space-between",
         alignItems: "center",
         children: [
-          /* @__PURE__ */ jsxs2(Stack_default2, { direction: "row", spacing: 1, children: [
+          !!checkboxSelection && /* @__PURE__ */ jsxs2(Stack_default2, { direction: "row", spacing: 1, children: [
             !isAllSelected && /* @__PURE__ */ jsxs2(Typography_default2, { level: "body-xs", children: [
               numberFormatter((selectionModel == null ? void 0 : selectionModel.length) || 0),
               " items selected"
@@ -40970,6 +41008,7 @@ var DatePicker = forwardRef84(
               }
             }
           ],
+          disablePortal: true,
           children: /* @__PURE__ */ jsx2(FocusTrap, { open: true, children: /* @__PURE__ */ jsxs2(CalendarSheet, { tabIndex: -1, role: "presentation", children: [
             /* @__PURE__ */ jsx2(
               Calendar_default,
@@ -41195,6 +41234,7 @@ var DateRangePicker = forwardRef85(
               }
             }
           ],
+          disablePortal: true,
           children: /* @__PURE__ */ jsx2(FocusTrap, { open: true, children: /* @__PURE__ */ jsxs2(CalendarSheet2, { tabIndex: -1, role: "presentation", children: [
             /* @__PURE__ */ jsx2(
               Calendar_default,
@@ -41275,7 +41315,10 @@ var MotionModal = motion19(Modal_default);
 var Modal3 = MotionModal;
 Modal3.displayName = "Modal";
 var MotionModalDialog = motion19(ModalDialog_default);
-var ModalDialog3 = MotionModalDialog;
+var StyledModalDialog = styled_default2(MotionModalDialog)({
+  padding: 0
+});
+var ModalDialog3 = StyledModalDialog;
 ModalDialog3.displayName = "ModalDialog";
 var MotionModalClose = motion19(ModalClose_default);
 var ModalClose3 = MotionModalClose;
@@ -41285,7 +41328,7 @@ var ModalOverflow3 = MotionModalOverflow;
 ModalOverflow3.displayName = "ModalOverflow";
 function ModalFrame(props) {
   const _a = props, { title, children } = _a, innerProps = __objRest(_a, ["title", "children"]);
-  return /* @__PURE__ */ jsxs2(ModalDialog3, __spreadProps(__spreadValues({}, innerProps), { children: [
+  return /* @__PURE__ */ jsxs2(StyledModalDialog, __spreadProps(__spreadValues({}, innerProps), { children: [
     /* @__PURE__ */ jsx2(ModalClose3, {}),
     /* @__PURE__ */ jsx2(DialogTitle_default2, { children: title }),
     /* @__PURE__ */ jsx2(DialogContent_default2, { children })
@@ -41492,6 +41535,7 @@ var MonthRangePicker = forwardRef86(
               }
             }
           ],
+          disablePortal: true,
           children: /* @__PURE__ */ jsx2(FocusTrap, { open: true, children: /* @__PURE__ */ jsxs2(CalendarSheet3, { tabIndex: -1, role: "presentation", children: [
             /* @__PURE__ */ jsx2(
               Calendar_default,
@@ -42986,6 +43030,43 @@ var typographyPropertyControls = {
     type: ControlType27.ComponentInstance
   }
 };
+
+// src/framer-entrypoint.ts
+var commonPropertyControls = {
+  useNumbering: {
+    title: "\u{1F4AB} Numbering",
+    type: ControlType28.Boolean,
+    defaultValue: false
+  },
+  numbering: {
+    title: " ",
+    type: ControlType28.Number,
+    defaultValue: 1,
+    hidden: ({ useNumbering }) => !useNumbering
+  }
+};
+var withCommonControls = (Component) => {
+  return (_a) => {
+    var _b = _a, { useNumbering, numbering } = _b, props = __objRest(_b, ["useNumbering", "numbering"]);
+    const components = [{ Component, props }];
+    if (useNumbering) {
+      components.push({
+        Component: Badge_default,
+        props: {
+          color: "neutral",
+          badgeContent: numbering,
+          anchorOrigin: {
+            vertical: "top",
+            horizontal: "left"
+          }
+        }
+      });
+    }
+    return components.reduce((acc, { Component: Component2, props: props2 }) => {
+      return [React181.createElement(Component2, props2, ...acc)];
+    }, []);
+  };
+};
 export {
   Accordion3 as Accordion,
   AccordionDetails3 as AccordionDetails,
@@ -43102,6 +43183,7 @@ export {
   chipClasses_default as chipClasses,
   chipPropertyControls,
   circularProgressClasses_default as circularProgressClasses,
+  commonPropertyControls,
   dataTablePropertyControls,
   datePickerPropertyControls,
   dateRangePickerPropertyControls,
@@ -43165,7 +43247,8 @@ export {
   textareaPropertyControls,
   tooltipClasses_default as tooltipClasses,
   typographyClasses_default as typographyClasses,
-  typographyPropertyControls
+  typographyPropertyControls,
+  withCommonControls
 };
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",