@ceed/ads 0.0.61 → 0.0.63

package/framer/index.js

@@ -34662,6 +34662,9 @@ Box2.displayName = "Box";
 // src/components/Box/index.ts
 var Box_default2 = Box2;
 
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+import { useState as useState23 } from "react";
+
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef79 } from "react";
 import { motion as motion6 } from "framer-motion";
@@ -34681,6 +34684,22 @@ Button3.displayName = "Button";
 // src/components/Button/index.ts
 var Button_default2 = Button3;
 
+// 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 [needCollapsed, setNeedCollapsed] = useState23(false);
+  const firstCrumb = crumbs[0];
+  const restCrumbs = 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 && !needCollapsed ? /* @__PURE__ */ jsx2(Button_default2, { size, variant: "plain", color: "neutral", onClick: () => setNeedCollapsed(true), children: "\u2022\u2022\u2022" }) : collapsingCrumbs),
+    restCrumbs
+  ] }));
+}
+Breadcrumbs3.displayName = "Breadcrumbs";
+
 // src/components/Calendar/Calendar.tsx
 import { Fragment as Fragment17, forwardRef as forwardRef82, useMemo as useMemo34 } from "react";
 
@@ -34688,11 +34707,11 @@ import { Fragment as Fragment17, forwardRef as forwardRef82, useMemo as useMemo3
 var capitalize_default = capitalize;
 
 // ../../node_modules/@mui/material/utils/createSvgIcon.js
-import * as React171 from "react";
+import * as React172 from "react";
 
 // ../../node_modules/@mui/material/SvgIcon/SvgIcon.js
 var import_prop_types90 = __toESM(require_prop_types());
-import * as React170 from "react";
+import * as React171 from "react";
 
 // ../../node_modules/@mui/material/styles/createMixins.js
 function createMixins(breakpoints, mixins) {
@@ -35477,7 +35496,7 @@ var SvgIconRoot2 = styled_default3("svg", {
     }[ownerState.color]
   };
 });
-var SvgIcon3 = /* @__PURE__ */ React170.forwardRef(function SvgIcon4(inProps, ref) {
+var SvgIcon3 = /* @__PURE__ */ React171.forwardRef(function SvgIcon4(inProps, ref) {
   const props = useThemeProps3({
     props: inProps,
     name: "MuiSvgIcon"
@@ -35493,7 +35512,7 @@ var SvgIcon3 = /* @__PURE__ */ React170.forwardRef(function SvgIcon4(inProps, re
     titleAccess,
     viewBox = "0 0 24 24"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded96);
-  const hasSvgAsChild = /* @__PURE__ */ React170.isValidElement(children) && children.type === "svg";
+  const hasSvgAsChild = /* @__PURE__ */ React171.isValidElement(children) && children.type === "svg";
   const ownerState = _extends({}, props, {
     color: color2,
     component,
@@ -35613,7 +35632,7 @@ function createSvgIcon2(path, displayName) {
     Component.displayName = `${displayName}Icon`;
   }
   Component.muiName = SvgIcon_default2.muiName;
-  return /* @__PURE__ */ React171.memo(/* @__PURE__ */ React171.forwardRef(Component));
+  return /* @__PURE__ */ React172.memo(/* @__PURE__ */ React172.forwardRef(Component));
 }
 
 // ../../node_modules/@mui/icons-material/esm/ChevronLeft.js
@@ -35724,24 +35743,24 @@ IconButton3.displayName = "IconButton";
 var IconButton_default2 = IconButton3;
 
 // src/components/Calendar/hooks/use-calendar-props.ts
-import { useCallback as useCallback24, useMemo as useMemo33, useState as useState23 } from "react";
+import { useCallback as useCallback24, useMemo as useMemo33, useState as useState24 } from "react";
 var resolveView = (view, views) => {
   return views.includes(view) ? view : views[0];
 };
 var useCalendarProps = (inProps) => {
   var _a, _b;
-  const [uncontrolledView, setUncontrolledView] = useState23(
+  const [uncontrolledView, setUncontrolledView] = useState24(
     () => resolveView(inProps.view || "day", inProps.views || ["day", "month"])
   );
-  const [uncontrolledValue, setUncontrolledValue] = useState23(inProps.defaultValue);
-  const [viewMonth, setViewMonth] = useState23(() => {
+  const [uncontrolledValue, setUncontrolledValue] = useState24(inProps.defaultValue);
+  const [viewMonth, setViewMonth] = useState24(() => {
     var _a2, _b2;
     const today = /* @__PURE__ */ new Date();
     today.setDate(1);
     today.setHours(0, 0, 0, 0);
     return ((_a2 = inProps.value) == null ? void 0 : _a2[0]) || ((_b2 = inProps.defaultValue) == null ? void 0 : _b2[0]) || today;
   });
-  const [[page, direction], setPage] = useState23([0, 0]);
+  const [[page, direction], setPage] = useState24([0, 0]);
   const resolvedView = (_a = inProps.view) != null ? _a : uncontrolledView;
   const paginate = (newDirection) => {
     setPage([page + newDirection, newDirection]);
@@ -35803,10 +35822,10 @@ var useCalendarProps = (inProps) => {
 };
 
 // src/components/Calendar/hooks/use-calendar.ts
-import { useCallback as useCallback25, useState as useState24 } from "react";
+import { useCallback as useCallback25, useState as useState25 } from "react";
 var useCalendar = (ownerState) => {
-  const [hoverDay, setHoverDay] = useState24(null);
-  const [hoverMonth, setHoverMonth] = useState24(null);
+  const [hoverDay, setHoverDay] = useState25(null);
+  const [hoverMonth, setHoverMonth] = useState25(null);
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
     onPrev: useCallback25(() => {
@@ -36043,12 +36062,12 @@ var CalendarHeader = styled_default2("div", {
 var CalendarViewContainer = styled_default2("div", {
   name: "Calendar",
   slot: "viewContainer"
-})(({ theme, viewType }) => ({
+})(({ theme, calendarType }) => ({
   paddingLeft: theme.spacing(1),
   paddingRight: theme.spacing(1),
   position: "relative",
   overflow: "hidden",
-  minHeight: viewType === "day" ? "250px" : "unset"
+  minHeight: calendarType === "datePicker" ? "250px" : "unset"
 }));
 var CalendarViewTable = styled_default2(motion9.table, {
   name: "Calendar",
@@ -36234,7 +36253,7 @@ var PickerDays = (props) => {
     () => getWeekdayNames(ownerState.locale || "default"),
     [ownerState.locale]
   );
-  return /* @__PURE__ */ jsx2(CalendarViewContainer, { viewType: "day", children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx2(CalendarViewContainer, { calendarType: "datePicker", children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsxs2(
     CalendarViewTable,
     {
       custom: ownerState.direction,
@@ -36301,6 +36320,7 @@ var PickerDays = (props) => {
   ) }) });
 };
 var PickerMonths = (props) => {
+  var _a;
   const { ownerState } = props;
   const { getPickerMonthProps, getMonthCellProps } = useCalendar(ownerState);
   const chunkedMonths = Array.from({ length: 12 }, (_4, i) => i).reduce(
@@ -36313,7 +36333,8 @@ var PickerMonths = (props) => {
     },
     [[]]
   );
-  return /* @__PURE__ */ jsx2(CalendarViewContainer, { viewType: "month", children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsx2(
+  const isMonthRangeSelection = !((_a = ownerState.views) == null ? void 0 : _a.find((view) => view === "day")) && ownerState.rangeSelection;
+  return /* @__PURE__ */ jsx2(CalendarViewContainer, { calendarType: isMonthRangeSelection ? "monthPicker" : "datePicker", children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, custom: ownerState.direction, children: /* @__PURE__ */ jsx2(
     CalendarViewTable,
     {
       custom: ownerState.direction,
@@ -36329,12 +36350,12 @@ var PickerMonths = (props) => {
       dragConstraints: { left: 0, right: 0 },
       dragElastic: 1,
       onDragEnd: (e, { offset: offset2, velocity }) => {
-        var _a, _b;
+        var _a2, _b;
         const swipe = swipePower(offset2.x, velocity.x);
         if (swipe < -swipeConfidenceThreshold) {
           const date = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
           date.setMonth(date.getMonth() + 1);
-          (_a = ownerState.onMonthChange) == null ? void 0 : _a.call(ownerState, date);
+          (_a2 = ownerState.onMonthChange) == null ? void 0 : _a2.call(ownerState, date);
         } else if (swipe > swipeConfidenceThreshold) {
           const date = new Date(ownerState.viewMonth || /* @__PURE__ */ new Date());
           date.setMonth(date.getMonth() - 1);
@@ -36473,7 +36494,7 @@ import {
   useEffect as useEffect36,
   useMemo as useMemo35,
   useRef as useRef43,
-  useState as useState25
+  useState as useState26
 } from "react";
 
 // src/components/Sheet/Sheet.tsx
@@ -36578,6 +36599,21 @@ Stack2.displayName = "Stack";
 var Stack_default2 = Stack2;
 
 // src/components/DataTable/DataTable.tsx
+var OverlayWrapper = styled_default2("tr", {
+  name: "DataTable",
+  slot: "overlayWrapper"
+})({
+  position: "sticky",
+  top: `calc(var(--unstable_TableCell-height, 32px))`,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  "& > td": {
+    height: 0,
+    padding: 0,
+    border: "none !important"
+  }
+});
 var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
 function TablePagination(props) {
   const {
@@ -36749,7 +36785,7 @@ function useDataTableRenderer({
   selectionModel = [],
   onSelectionModelChange
 }) {
-  const [page, setPage] = useState25((paginationModel == null ? void 0 : paginationModel.page) || 1);
+  const [page, setPage] = useState26((paginationModel == null ? void 0 : paginationModel.page) || 1);
   const pageSize2 = (paginationModel == null ? void 0 : paginationModel.pageSize) || 20;
   const selectedModelSet = useMemo35(
     () => new Set(selectionModel),
@@ -36845,11 +36881,14 @@ function DataTable(props) {
     rowCount: _4,
     columns: __,
     onPaginationModelChange: ___,
+    paginationMode: ____,
     paginationModel: paginationModel,
+    loading,
     slots: {
       checkbox: RenderCheckbox = Checkbox_default2,
       toolbar: Toolbar,
-      footer: Footer
+      footer: Footer,
+      loadingOverlay: LoadingOverlay = () => /* @__PURE__ */ jsx2(LinearProgress_default, {})
     } = {},
     slotProps: {
       checkbox: checkboxProps = {},
@@ -36867,7 +36906,10 @@ function DataTable(props) {
     // columns is used in useDataTableRenderer
     "onPaginationModelChange",
     // onPaginationModelChange is used in useDataTableRenderer
+    "paginationMode",
+    // paginationMode is used in useDataTableRenderer
     "paginationModel",
+    "loading",
     "slots",
     "slotProps"
   ]);
@@ -36975,50 +37017,65 @@ function DataTable(props) {
               c.field
             ))
           ] }) }),
-          /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
-            const rowId = `${rowIndex + (page - 1) * pageSize2}`;
-            return /* @__PURE__ */ jsxs2(
-              "tr",
+          /* @__PURE__ */ jsxs2("tbody", { children: [
+            /* @__PURE__ */ jsx2(OverlayWrapper, { children: !!loading && /* @__PURE__ */ jsx2("td", { children: /* @__PURE__ */ jsx2(
+              Box_default2,
               {
-                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,
-                children: [
-                  checkboxSelection && /* @__PURE__ */ jsx2(
-                    "th",
-                    {
-                      scope: "row",
-                      style: {
-                        textAlign: "center"
-                      },
-                      children: /* @__PURE__ */ jsx2(
-                        RenderCheckbox,
-                        __spreadValues({
-                          onChange: (e) => onCheckboxChange(e, rowId),
-                          checked: isSelectedRow(rowId)
-                        }, checkboxProps)
-                      )
-                    }
-                  ),
-                  columns.map((column2) => {
-                    var _a2, _b;
-                    return /* @__PURE__ */ jsx2(
-                      "td",
+                sx: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0
+                },
+                children: /* @__PURE__ */ jsx2(LoadingOverlay, {})
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx2(OverlayWrapper, {}),
+            dataInPage.map((row, rowIndex) => {
+              const rowId = `${rowIndex + (page - 1) * pageSize2}`;
+              return /* @__PURE__ */ jsxs2(
+                "tr",
+                {
+                  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,
+                  children: [
+                    checkboxSelection && /* @__PURE__ */ jsx2(
+                      "th",
                       {
+                        scope: "row",
                         style: {
-                          textAlign: column2.type === "number" ? "end" : "start"
+                          textAlign: "center"
                         },
-                        children: (_b = (_a2 = column2.renderCell) == null ? void 0 : _a2.call(column2, { row, value: row[column2.field] })) != null ? _b : row[column2.field]
-                      },
-                      column2.field
-                    );
-                  })
-                ]
-              },
-              rowId
-            );
-          }) }),
+                        children: /* @__PURE__ */ jsx2(
+                          RenderCheckbox,
+                          __spreadValues({
+                            onChange: (e) => onCheckboxChange(e, rowId),
+                            checked: isSelectedRow(rowId)
+                          }, checkboxProps)
+                        )
+                      }
+                    ),
+                    columns.map((column2) => {
+                      var _a2, _b;
+                      return /* @__PURE__ */ jsx2(
+                        "td",
+                        {
+                          style: {
+                            textAlign: column2.type === "number" ? "end" : "start"
+                          },
+                          children: (_b = (_a2 = column2.renderCell) == null ? void 0 : _a2.call(column2, { row, value: row[column2.field] })) != null ? _b : row[column2.field]
+                        },
+                        column2.field
+                      );
+                    })
+                  ]
+                },
+                rowId
+              );
+            })
+          ] }),
           Footer && /* @__PURE__ */ jsx2(Footer, {})
         ] }))
       })
@@ -37036,7 +37093,7 @@ function DataTable(props) {
 DataTable.displayName = "DataTable";
 
 // src/components/DatePicker/DatePicker.tsx
-import React178, { forwardRef as forwardRef84, useCallback as useCallback28, useState as useState27 } from "react";
+import React179, { forwardRef as forwardRef84, useCallback as useCallback28, useState as useState28 } from "react";
 
 // ../../node_modules/imask/esm/core/utils.js
 function isString(str) {
@@ -40430,11 +40487,11 @@ try {
 }
 
 // ../../node_modules/react-imask/esm/input.js
-import React177 from "react";
+import React178 from "react";
 
 // ../../node_modules/react-imask/esm/mixin.js
 var import_prop_types91 = __toESM(require_prop_types(), 1);
-import React176 from "react";
+import React177 from "react";
 var MASK_PROPS = {
   // common
   mask: import_prop_types91.default.oneOfType([import_prop_types91.default.array, import_prop_types91.default.func, import_prop_types91.default.string, import_prop_types91.default.instanceOf(RegExp), import_prop_types91.default.oneOf([Date, Number, IMask.Masked]), import_prop_types91.default.instanceOf(IMask.Masked)]),
@@ -40488,7 +40545,7 @@ var NON_MASK_OPTIONS_NAMES = ["value", "unmask", "onAccept", "onComplete", "inpu
 var MASK_OPTIONS_NAMES = MASK_PROPS_NAMES.filter((pName) => NON_MASK_OPTIONS_NAMES.indexOf(pName) < 0);
 function IMaskMixin(ComposedComponent) {
   var _Class;
-  const MaskedComponent = (_Class = class MaskedComponent extends React176.Component {
+  const MaskedComponent = (_Class = class MaskedComponent extends React177.Component {
     constructor(props) {
       super(props);
       this._inputRef = this._inputRef.bind(this);
@@ -40593,7 +40650,7 @@ function IMaskMixin(ComposedComponent) {
         this.props.onComplete(this.maskValue, this.maskRef, e);
     }
     render() {
-      return React176.createElement(ComposedComponent, __spreadProps(__spreadValues({}, this._extractNonMaskProps(this.props)), {
+      return React177.createElement(ComposedComponent, __spreadProps(__spreadValues({}, this._extractNonMaskProps(this.props)), {
         inputRef: this._inputRef
       }));
     }
@@ -40601,7 +40658,7 @@ function IMaskMixin(ComposedComponent) {
   const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || "Component";
   MaskedComponent.displayName = "IMask(" + nestedComponentName + ")";
   MaskedComponent.propTypes = MASK_PROPS;
-  return React176.forwardRef((props, ref) => React176.createElement(MaskedComponent, __spreadProps(__spreadValues({}, props), {
+  return React177.forwardRef((props, ref) => React177.createElement(MaskedComponent, __spreadProps(__spreadValues({}, props), {
     ref
   })));
 }
@@ -40613,17 +40670,17 @@ var IMaskInputClass = IMaskMixin((_ref) => {
   } = _a, props = __objRest(_a, [
     "inputRef"
   ]);
-  return React177.createElement("input", __spreadProps(__spreadValues({}, props), {
+  return React178.createElement("input", __spreadProps(__spreadValues({}, props), {
     ref: inputRef
   }));
 });
-var IMaskInputFn = (props, ref) => React177.createElement(IMaskInputClass, __spreadProps(__spreadValues({}, props), {
+var IMaskInputFn = (props, ref) => React178.createElement(IMaskInputClass, __spreadProps(__spreadValues({}, props), {
   ref
 }));
-var IMaskInput = React177.forwardRef(IMaskInputFn);
+var IMaskInput = React178.forwardRef(IMaskInputFn);
 
 // ../../node_modules/react-imask/esm/hook.js
-import { useRef as useRef44, useState as useState26, useCallback as useCallback27, useEffect as useEffect37 } from "react";
+import { useRef as useRef44, useState as useState27, useCallback as useCallback27, useEffect as useEffect37 } from "react";
 
 // ../../node_modules/react-imask/esm/index.js
 import "react";
@@ -40688,7 +40745,7 @@ var formatValueString = (date) => {
     month = "0" + month;
   return [year, month, day].join("/");
 };
-var TextMaskAdapter = React178.forwardRef(
+var TextMaskAdapter = React179.forwardRef(
   function TextMaskAdapter2(props, ref) {
     const _a = props, { onChange } = _a, other = __objRest(_a, ["onChange"]);
     return /* @__PURE__ */ jsx2(
@@ -40736,8 +40793,8 @@ var TextMaskAdapter = React178.forwardRef(
 var DatePicker = forwardRef84(
   (props, ref) => {
     const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
-    const [value, setValue] = useState27(props.value || "");
-    const [anchorEl, setAnchorEl] = useState27(null);
+    const [value, setValue] = useState28(props.value || "");
+    const [anchorEl, setAnchorEl] = useState28(null);
     const open = Boolean(anchorEl);
     const handleChange = useCallback28(
       (event) => {
@@ -40838,7 +40895,7 @@ var DatePicker = forwardRef84(
 DatePicker.displayName = "DatePicker";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import React179, { forwardRef as forwardRef85, useCallback as useCallback29, useMemo as useMemo36, useState as useState28 } from "react";
+import React180, { forwardRef as forwardRef85, useCallback as useCallback29, useMemo as useMemo36, useState as useState29 } from "react";
 var StyledPopper2 = styled_default2(Popper, {
   name: "DateRangePicker",
   slot: "popper"
@@ -40886,7 +40943,7 @@ var parseDate = (str) => {
     )
   ];
 };
-var TextMaskAdapter3 = React179.forwardRef(
+var TextMaskAdapter3 = React180.forwardRef(
   function TextMaskAdapter4(props, ref) {
     const _a = props, { onChange } = _a, other = __objRest(_a, ["onChange"]);
     return /* @__PURE__ */ jsx2(
@@ -40927,8 +40984,8 @@ var TextMaskAdapter3 = React179.forwardRef(
 var DateRangePicker = forwardRef85(
   (props, ref) => {
     const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
-    const [value, setValue] = useState28(props.value || "");
-    const [anchorEl, setAnchorEl] = useState28(null);
+    const [value, setValue] = useState29(props.value || "");
+    const [anchorEl, setAnchorEl] = useState29(null);
     const open = Boolean(anchorEl);
     const calendarValue = useMemo36(
       () => value ? parseDate(value) : void 0,
@@ -41155,7 +41212,7 @@ var MenuItem3 = (props) => {
 MenuItem3.displayName = "MenuItem";
 
 // src/components/MonthRangePicker/MonthRangePicker.tsx
-import React180, { forwardRef as forwardRef86, useCallback as useCallback30, useMemo as useMemo37, useState as useState29 } from "react";
+import React181, { forwardRef as forwardRef86, useCallback as useCallback30, useMemo as useMemo37, useState as useState30 } from "react";
 var StyledPopper3 = styled_default2(Popper, {
   name: "MonthRangePicker",
   slot: "popper"
@@ -41198,7 +41255,7 @@ var parseDate2 = (str) => {
     )
   ];
 };
-var TextMaskAdapter5 = React180.forwardRef(
+var TextMaskAdapter5 = React181.forwardRef(
   function TextMaskAdapter6(props, ref) {
     const _a = props, { onChange } = _a, other = __objRest(_a, ["onChange"]);
     return /* @__PURE__ */ jsx2(
@@ -41233,8 +41290,8 @@ var TextMaskAdapter5 = React180.forwardRef(
 var MonthRangePicker = forwardRef86(
   (props, ref) => {
     const { onChange, disabled, label, error, helperText, minDate, maxDate, disableFuture, disablePast } = props;
-    const [value, setValue] = useState29(props.value || "");
-    const [anchorEl, setAnchorEl] = useState29(null);
+    const [value, setValue] = useState30(props.value || "");
+    const [anchorEl, setAnchorEl] = useState30(null);
     const open = Boolean(anchorEl);
     const calendarValue = useMemo37(
       () => value ? parseDate2(value) : void 0,
@@ -41666,12 +41723,24 @@ var breadcrumbsPropertyControls = {
     type: ControlType5.Array,
     control: {
       // NOTE: 일단 framer에서는 string만 받는다
-      type: ControlType5.String
+      type: ControlType5.Object,
+      controls: {
+        title: {
+          title: "Title",
+          type: ControlType5.String,
+          defaultValue: "Home"
+        },
+        href: {
+          title: "Href",
+          type: ControlType5.String,
+          defaultValue: ""
+        }
+      }
     },
     defaultValue: []
   },
-  separator: {
-    title: "Separator",
+  separatorIcon: {
+    title: "Separator Icon",
     type: ControlType5.ComponentInstance
   },
   size: {
@@ -41679,6 +41748,11 @@ var breadcrumbsPropertyControls = {
     type: ControlType5.Enum,
     options: ["sm", "md", "lg"],
     defaultValue: "md"
+  },
+  collapsed: {
+    title: "Collapsed",
+    type: ControlType5.Boolean,
+    defaultValue: false
   }
 };
 
@@ -41911,6 +41985,10 @@ var dataTablePropertyControls = {
     type: ControlType10.Boolean,
     defaultValue: false
   },
+  loading: {
+    type: ControlType10.Boolean,
+    defaultValue: false
+  },
   onPaginationModelChange: {
     type: ControlType10.EventHandler
   },
@@ -41956,11 +42034,11 @@ var datePickerPropertyControls = {
   },
   minDate: {
     title: "Minimum Date",
-    type: ControlType11.Date
+    type: ControlType11.String
   },
   maxDate: {
     title: "Maximum Date",
-    type: ControlType11.Date
+    type: ControlType11.String
   },
   disableFuture: {
     title: "Disable Future",
@@ -42008,11 +42086,11 @@ var dateRangePickerPropertyControls = {
   },
   minDate: {
     title: "Minimum Date",
-    type: ControlType12.Date
+    type: ControlType12.String
   },
   maxDate: {
     title: "Maximum Date",
-    type: ControlType12.Date
+    type: ControlType12.String
   },
   disableFuture: {
     title: "Disable Future",
@@ -42576,8 +42654,9 @@ var typographyPropertyControls = {
   textAlign: {
     title: "Text Align",
     type: ControlType27.Enum,
-    options: ["start", "center", "end"],
-    defaultValue: "start"
+    options: [void 0, "start", "center", "end"],
+    optionTitles: ["None", "Start", "Center", "End"],
+    defaultValue: void 0
   },
   level: {
     title: "Level",
@@ -42640,7 +42719,7 @@ export {
   AvatarGroup_default as AvatarGroup,
   Badge_default as Badge,
   Box2 as Box,
-  Breadcrumbs_default as Breadcrumbs,
+  Breadcrumbs3 as Breadcrumbs,
   Button3 as Button,
   Calendar,
   Card_default as Card,

package/package.json

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