@moving-walls/design-system 1.0.23 → 2.0.0

package/dist/index.js

@@ -289,14 +289,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     label = _a.label,
     error = _a.error,
     helpText = _a.helpText,
-    props = __rest$1(_a, ["className", "label", "error", "helpText"]);
+    id = _a.id,
+    props = __rest$1(_a, ["className", "label", "error", "helpText", "id"]);
   return require$$1.jsxs("div", {
     className: "space-y-2",
     children: [label && require$$1.jsx("label", {
+      htmlFor: id,
       className: "block text-sm font-normal leading-none text-mw-neutral-700 dark:text-mw-neutral-300",
       children: label
     }), require$$1.jsx("input", Object.assign({
       ref: ref,
+      id: id,
       className: clsx('block w-full h-10 min-h-10 px-3 py-2 border rounded-md text-sm font-normal', 'focus:outline-none focus:ring-1 focus:ring-mw-primary-500 focus:border-transparent', 'disabled:opacity-50 disabled:cursor-not-allowed', error ? 'border-mw-error-300 text-mw-error-900 placeholder-mw-error-300 focus:ring-mw-error-500' : 'border-mw-neutral-100 dark:border-mw-neutral-600 text-mw-neutral-500 dark:text-white placeholder-mw-neutral-400', 'dark:bg-mw-neutral-800', className)
     }, props)), error && require$$1.jsx("p", {
       className: "text-sm text-mw-error-600 dark:text-mw-error-400",
@@ -316,7 +319,8 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     helpText = _a.helpText,
     _a$resize = _a.resize,
     resize = _a$resize === void 0 ? 'vertical' : _a$resize,
-    props = __rest$1(_a, ["className", "label", "error", "helpText", "resize"]);
+    id = _a.id,
+    props = __rest$1(_a, ["className", "label", "error", "helpText", "resize", "id"]);
   var resizeClasses = {
     none: 'resize-none',
     vertical: 'resize-y',
@@ -326,10 +330,12 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return require$$1.jsxs("div", {
     className: "space-y-2",
     children: [label && require$$1.jsx("label", {
+      htmlFor: id,
       className: "block text-sm font-medium text-mw-neutral-700 dark:text-mw-neutral-300",
       children: label
     }), require$$1.jsx("textarea", Object.assign({
       ref: ref,
+      id: id,
       className: clsx('block w-full px-3 py-2 border rounded-md shadow-sm min-h-[80px]', 'focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-transparent', 'disabled:opacity-50 disabled:cursor-not-allowed', error ? 'border-mw-error-300 text-mw-error-900 placeholder-mw-error-300 focus:ring-mw-error-500' : 'border-mw-neutral-300 dark:border-mw-neutral-600 text-mw-neutral-900 dark:text-white placeholder-mw-neutral-400', 'dark:bg-mw-neutral-800', resizeClasses[resize], className)
     }, props)), error && require$$1.jsx("p", {
       className: "text-sm text-mw-error-600 dark:text-mw-error-400",
@@ -347,7 +353,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     label = _a.label,
     description = _a.description,
     error = _a.error,
-    props = __rest$1(_a, ["className", "label", "description", "error"]);
+    id = _a.id,
+    props = __rest$1(_a, ["className", "label", "description", "error", "id"]);
   return require$$1.jsxs("div", {
     className: "space-y-2",
     children: [require$$1.jsxs("div", {
@@ -355,10 +362,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       children: [require$$1.jsx("input", Object.assign({
         type: "checkbox",
         ref: ref,
+        id: id,
         className: clsx('mt-0.5 h-4 w-4 rounded border-mw-neutral-100 dark:border-mw-neutral-600', 'accent-mw-primary-500 focus:ring-mw-primary-600 focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', error && 'border-mw-error-300 accent-mw-error-500 focus:ring-mw-error-500', className)
       }, props)), (label || description) && require$$1.jsxs("div", {
         className: "flex-1 min-w-0",
         children: [label && require$$1.jsx("label", {
+          htmlFor: id,
           className: "text-sm font-medium text-mw-neutral-500 dark:text-mw-neutral-300",
           children: label
         }), description && require$$1.jsx("p", {
@@ -378,7 +387,8 @@ var Radio$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     label = _a.label,
     description = _a.description,
     error = _a.error,
-    props = __rest$1(_a, ["className", "label", "description", "error"]);
+    id = _a.id,
+    props = __rest$1(_a, ["className", "label", "description", "error", "id"]);
   return require$$1.jsxs("div", {
     className: "space-y-2",
     children: [require$$1.jsxs("div", {
@@ -386,10 +396,12 @@ var Radio$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       children: [require$$1.jsx("input", Object.assign({
         type: "radio",
         ref: ref,
+        id: id,
         className: clsx('mt-0.5 h-4 w-4 border-mw-neutral-100 dark:border-mw-neutral-600', 'accent-mw-primary-500 focus:ring-mw-primary-600 focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', error && 'border-mw-error-300 accent-mw-error-500 focus:ring-mw-error-500', className)
       }, props)), (label || description) && require$$1.jsxs("div", {
         className: "flex-1 min-w-0",
         children: [label && require$$1.jsx("label", {
+          htmlFor: id,
           className: "text-sm font-medium text-mw-neutral-500 dark:text-mw-neutral-300",
           children: label
         }), description && require$$1.jsx("p", {
@@ -31454,7 +31466,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React__namespace.forwardRef((props, forwardedRef) => {
+var FocusScope$1 = React__namespace.forwardRef((props, forwardedRef) => {
     const { loop = false, trapped = false, onMountAutoFocus: onMountAutoFocusProp, onUnmountAutoFocus: onUnmountAutoFocusProp } = props, scopeProps = __rest$1(props, ["loop", "trapped", "onMountAutoFocus", "onUnmountAutoFocus"]);
     const [container, setContainer] = React__namespace.useState(null);
     const onMountAutoFocus = useCallbackRef$1(onMountAutoFocusProp);
@@ -31574,7 +31586,7 @@ var FocusScope = React__namespace.forwardRef((props, forwardedRef) => {
     }, [loop, trapped, focusScope.paused]);
     return /* @__PURE__ */ require$$1.jsx(Primitive.div, Object.assign(Object.assign({ tabIndex: -1 }, scopeProps), { ref: composedRefs, onKeyDown: handleKeyDown }));
 });
-FocusScope.displayName = FOCUS_SCOPE_NAME;
+FocusScope$1.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
     const previouslyFocusedElement = document.activeElement;
     for (const candidate of candidates) {
@@ -33926,10 +33938,10 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
     wordWrap: "normal"
 });
 var NAME = "VisuallyHidden";
-var VisuallyHidden = React__namespace.forwardRef((props, forwardedRef) => {
+var VisuallyHidden$1 = React__namespace.forwardRef((props, forwardedRef) => {
     return /* @__PURE__ */ require$$1.jsx(Primitive.span, Object.assign(Object.assign({}, props), { ref: forwardedRef, style: Object.assign(Object.assign({}, VISUALLY_HIDDEN_STYLES), props.style) }));
 });
-VisuallyHidden.displayName = NAME;
+VisuallyHidden$1.displayName = NAME;
 
 var getDefaultParent = function (originalTarget) {
     if (typeof document === 'undefined') {
@@ -35102,7 +35114,7 @@ var SelectContentImpl = React__namespace.forwardRef((props, forwardedRef) => {
         position,
         isPositioned,
         searchRef,
-        children: /* @__PURE__ */ require$$1.jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ require$$1.jsx(FocusScope, {
+        children: /* @__PURE__ */ require$$1.jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ require$$1.jsx(FocusScope$1, {
                 asChild: true,
                 trapped: context.open,
                 onMountAutoFocus: (event) => {
@@ -36144,8 +36156,7 @@ var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 function DatePicker(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Select date' : _ref$placeholder,
+    placeholder = _ref.placeholder,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     className = _ref.className,
@@ -36382,9 +36393,10 @@ function CalendarMonth(_ref) {
   }
   // Next month's leading days
   var totalCells = Math.ceil(days.length / 7) * 7;
-  for (var _i = days.length; _i < totalCells; _i++) {
-    var _date2 = new Date(lastDayOfMonth);
-    _date2.setDate(_date2.getDate() + (_i - days.length + 1));
+  var nextMonthStart = days.length;
+  for (var _i = nextMonthStart; _i < totalCells; _i++) {
+    var nextDay = _i - nextMonthStart + 1;
+    var _date2 = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, nextDay);
     days.push({
       date: _date2,
       isCurrentMonth: false
@@ -36487,8 +36499,8 @@ function CalendarMonth(_ref) {
 function DateRangePicker(_ref3) {
   var value = _ref3.value,
     onChange = _ref3.onChange,
-    _ref3$placeholder = _ref3.placeholder,
-    placeholder = _ref3$placeholder === void 0 ? 'Select date range' : _ref3$placeholder,
+    placeholder = _ref3.placeholder,
+    labels = _ref3.labels,
     _ref3$disabled = _ref3.disabled,
     disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
     _ref3.required;
@@ -36505,6 +36517,7 @@ function DateRangePicker(_ref3) {
     presets = _ref3$presets === void 0 ? defaultPresets$1 : _ref3$presets,
     _ref3$align = _ref3.align,
     align = _ref3$align === void 0 ? 'left' : _ref3$align;
+  var _a, _b;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -36670,7 +36683,7 @@ function DateRangePicker(_ref3) {
         className: "flex items-center justify-between px-3 py-2 border-t border-mw-neutral-200 dark:border-mw-neutral-700",
         children: [require$$1.jsx("div", {
           className: "text-[11px] text-mw-neutral-500 dark:text-mw-neutral-400",
-          children: selectingStart ? 'Select start date' : 'Select end date'
+          children: selectingStart ? (_a = labels === null || labels === void 0 ? void 0 : labels.selectStart) !== null && _a !== void 0 ? _a : 'Select start date' : (_b = labels === null || labels === void 0 ? void 0 : labels.selectEnd) !== null && _b !== void 0 ? _b : 'Select end date'
         }), require$$1.jsxs("div", {
           className: "flex gap-2 items-center",
           children: [require$$1.jsx("button", {
@@ -36831,8 +36844,7 @@ function TimePicker(_ref2) {
     label = _ref2.label,
     error = _ref2.error,
     helpText = _ref2.helpText,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? 'Select time' : _ref2$placeholder,
+    placeholder = _ref2.placeholder,
     className = _ref2.className,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'md' : _ref2$size,
@@ -37198,8 +37210,7 @@ function TimeSelect(_ref) {
 function TimeRangePicker(_ref2) {
   var value = _ref2.value,
     onChange = _ref2.onChange,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? 'Select time range' : _ref2$placeholder,
+    placeholder = _ref2.placeholder,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
     _ref2.required;
@@ -37212,8 +37223,10 @@ function TimeRangePicker(_ref2) {
     minTime = _ref2.minTime,
     maxTime = _ref2.maxTime,
     className = _ref2.className,
+    labels = _ref2.labels,
     _ref2$presets = _ref2.presets,
     presets = _ref2$presets === void 0 ? defaultPresets : _ref2$presets;
+  var _a, _b;
   var _useState5 = React.useState(value || {
       from: null,
       to: null
@@ -37350,13 +37363,13 @@ function TimeRangePicker(_ref2) {
             children: [require$$1.jsxs("div", {
               children: [require$$1.jsx("label", {
                 className: "block text-sm font-medium mb-2 text-mw-neutral-900 dark:text-white",
-                children: "From Time"
+                children: (_a = labels === null || labels === void 0 ? void 0 : labels.fromTime) !== null && _a !== void 0 ? _a : 'From Time'
               }), require$$1.jsx(TimeSelect, {
                 value: selectedRange.from,
                 onChange: handleFromTimeChange,
                 options: timeOptions,
                 format: format,
-                placeholder: "Select start time",
+                placeholder: labels === null || labels === void 0 ? void 0 : labels.selectStart,
                 disabled: disabled,
                 minTime: minTime,
                 maxTime: selectedRange.to ? format === '12' ? convertTo24Hour(selectedRange.to) : selectedRange.to : maxTime
@@ -37364,13 +37377,13 @@ function TimeRangePicker(_ref2) {
             }), require$$1.jsxs("div", {
               children: [require$$1.jsx("label", {
                 className: "block text-sm font-medium mb-2 text-mw-neutral-900 dark:text-white",
-                children: "To Time"
+                children: (_b = labels === null || labels === void 0 ? void 0 : labels.toTime) !== null && _b !== void 0 ? _b : 'To Time'
               }), require$$1.jsx(TimeSelect, {
                 value: selectedRange.to,
                 onChange: handleToTimeChange,
                 options: timeOptions,
                 format: format,
-                placeholder: "Select end time",
+                placeholder: labels === null || labels === void 0 ? void 0 : labels.selectEnd,
                 disabled: disabled || !selectedRange.from,
                 minTime: selectedRange.from ? format === '12' ? convertTo24Hour(selectedRange.from) : selectedRange.from : minTime,
                 maxTime: maxTime
@@ -38699,8 +38712,7 @@ function MultiSelect(_ref) {
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? [] : _ref$value,
     onChange = _ref.onChange,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Select...' : _ref$placeholder,
+    placeholder = _ref.placeholder,
     label = _ref.label,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -39157,7 +39169,8 @@ function ScheduleGrid(_ref) {
     _ref$presets = _ref.presets,
     presets = _ref$presets === void 0 ? DEFAULT_PRESETS : _ref$presets,
     _ref$showPresets = _ref.showPresets,
-    showPresets = _ref$showPresets === void 0 ? true : _ref$showPresets;
+    showPresets = _ref$showPresets === void 0 ? true : _ref$showPresets,
+    labels = _ref.labels;
   var _useState = React.useState('custom'),
     _useState2 = _slicedToArray(_useState, 2),
     selectedPreset = _useState2[0],
@@ -39280,6 +39293,7 @@ function ScheduleGrid(_ref) {
     onChange(newRules);
   };
   var renderHourGrid = function renderHourGrid(type, selectedHours) {
+    var _a, _b;
     var allSelected = selectedHours.size === 24;
     var label = type === 'DEFAULT' ? 'Default Hours' : type === 'WEEKDAY' ? 'Weekday Hours (Mon-Fri)' : 'Weekend Hours (Sat-Sun)';
     var isExpanded = expandedSection === type.toLowerCase();
@@ -39314,7 +39328,7 @@ function ScheduleGrid(_ref) {
               return handleSelectAll(type);
             },
             className: "text-xs text-mw-primary-500 hover:text-mw-primary-600 font-medium",
-            children: allSelected ? 'Deselect All' : 'Select All 24 Hours'
+            children: allSelected ? (_a = labels === null || labels === void 0 ? void 0 : labels.deselectAll) !== null && _a !== void 0 ? _a : 'Deselect All' : (_b = labels === null || labels === void 0 ? void 0 : labels.selectAll) !== null && _b !== void 0 ? _b : 'Select All 24 Hours'
           })
         }), require$$1.jsx("div", {
           className: "grid grid-cols-6 gap-1.5",
@@ -42924,6 +42938,221 @@ function AdvancedTable(_ref3) {
   });
 }
 
+function getCellValue(row, column) {
+  if (column.accessorFn) return column.accessorFn(row);
+  if (column.accessorKey) return row[column.accessorKey];
+  return undefined;
+}
+function useAdvancedTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    _ref$initialState = _ref.initialState,
+    initialState = _ref$initialState === void 0 ? {} : _ref$initialState,
+    _ref$getRowId = _ref.getRowId,
+    getRowId = _ref$getRowId === void 0 ? function (_row, index) {
+      return index;
+    } : _ref$getRowId;
+  var _useState = React.useState(initialState.sorting || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    sorting = _useState2[0],
+    setSorting = _useState2[1];
+  var _useState3 = React.useState(initialState.filters || []),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
+  var _useState5 = React.useState(initialState.globalFilter || ''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    globalFilter = _useState6[0],
+    setGlobalFilter = _useState6[1];
+  var _useState7 = React.useState(initialState.columnVisibility || {}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    columnVisibility = _useState8[0],
+    setColumnVisibility = _useState8[1];
+  var _useState9 = React.useState(initialState.density || 'normal'),
+    _useState0 = _slicedToArray(_useState9, 2),
+    density = _useState0[0],
+    setDensity = _useState0[1];
+  var _useState1 = React.useState(new Set()),
+    _useState10 = _slicedToArray(_useState1, 2),
+    selectedRows = _useState10[0],
+    setSelectedRows = _useState10[1];
+  var visibleColumns = React.useMemo(function () {
+    return columns.filter(function (col) {
+      return columnVisibility[col.id] !== false && !col.hidden;
+    });
+  }, [columns, columnVisibility]);
+  var toggleSort = React.useCallback(function (columnId) {
+    setSorting(function (prev) {
+      var existing = prev.find(function (s) {
+        return s.columnId === columnId;
+      });
+      if (!existing) return [{
+        columnId: columnId,
+        direction: 'asc'
+      }];
+      if (existing.direction === 'asc') return [{
+        columnId: columnId,
+        direction: 'desc'
+      }];
+      return [];
+    });
+  }, []);
+  var addFilter = React.useCallback(function (filter) {
+    setFilters(function (prev) {
+      var idx = prev.findIndex(function (f) {
+        return f.columnId === filter.columnId;
+      });
+      if (idx >= 0) {
+        var next = _toConsumableArray(prev);
+        next[idx] = filter;
+        return next;
+      }
+      return [].concat(_toConsumableArray(prev), [filter]);
+    });
+  }, []);
+  var removeFilter = React.useCallback(function (columnId) {
+    setFilters(function (prev) {
+      return prev.filter(function (f) {
+        return f.columnId !== columnId;
+      });
+    });
+  }, []);
+  var clearFilters = React.useCallback(function () {
+    setFilters([]);
+    setGlobalFilter('');
+  }, []);
+  var toggleColumnVisibility = React.useCallback(function (columnId) {
+    setColumnVisibility(function (prev) {
+      return Object.assign(Object.assign({}, prev), _defineProperty({}, columnId, prev[columnId] === false ? true : false));
+    });
+  }, []);
+  var toggleRowSelection = React.useCallback(function (rowId) {
+    setSelectedRows(function (prev) {
+      var next = new Set(prev);
+      if (next.has(rowId)) next["delete"](rowId);else next.add(rowId);
+      return next;
+    });
+  }, []);
+  var selectAllRows = React.useCallback(function () {
+    setSelectedRows(new Set(data.map(function (row, i) {
+      return getRowId(row, i);
+    })));
+  }, [data, getRowId]);
+  var clearSelection = React.useCallback(function () {
+    setSelectedRows(new Set());
+  }, []);
+  var processedData = React.useMemo(function () {
+    var result = _toConsumableArray(data);
+    // Apply global filter
+    if (globalFilter) {
+      var searchLower = globalFilter.toLowerCase();
+      result = result.filter(function (row) {
+        return columns.some(function (col) {
+          if (!col.searchable && col.searchable !== undefined) return false;
+          var value = getCellValue(row, col);
+          return value != null && String(value).toLowerCase().includes(searchLower);
+        });
+      });
+    }
+    // Apply column filters
+    var _iterator = _createForOfIteratorHelper(filters),
+      _step;
+    try {
+      var _loop = function _loop() {
+        var filter = _step.value;
+        var column = columns.find(function (c) {
+          return c.id === filter.columnId;
+        });
+        if (!column) return 1; // continue
+        result = result.filter(function (row) {
+          var value = getCellValue(row, column);
+          if (value == null) return false;
+          var strValue = String(value).toLowerCase();
+          var filterValue = String(filter.value).toLowerCase();
+          switch (filter.operator || 'contains') {
+            case 'equals':
+              return strValue === filterValue;
+            case 'contains':
+              return strValue.includes(filterValue);
+            case 'startsWith':
+              return strValue.startsWith(filterValue);
+            case 'endsWith':
+              return strValue.endsWith(filterValue);
+            default:
+              return strValue.includes(filterValue);
+          }
+        });
+      };
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        if (_loop()) continue;
+      }
+      // Apply sorting
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (sorting.length > 0) {
+      var sort = sorting[0];
+      var column = columns.find(function (c) {
+        return c.id === sort.columnId;
+      });
+      if (column) {
+        result.sort(function (a, b) {
+          var aVal = getCellValue(a, column);
+          var bVal = getCellValue(b, column);
+          if (aVal == null && bVal == null) return 0;
+          if (aVal == null) return 1;
+          if (bVal == null) return -1;
+          var cmp = String(aVal).localeCompare(String(bVal), undefined, {
+            numeric: true
+          });
+          return sort.direction === 'desc' ? -cmp : cmp;
+        });
+      }
+    }
+    return result;
+  }, [data, columns, sorting, filters, globalFilter]);
+  var state = {
+    sorting: sorting,
+    filters: filters,
+    globalFilter: globalFilter,
+    columnVisibility: columnVisibility,
+    columnOrder: columns.map(function (c) {
+      return c.id;
+    }),
+    columnSizing: {},
+    density: density,
+    frozenColumns: {
+      left: [],
+      right: []
+    }
+  };
+  return {
+    // Data
+    processedData: processedData,
+    visibleColumns: visibleColumns,
+    // State
+    state: state,
+    sorting: sorting,
+    filters: filters,
+    globalFilter: globalFilter,
+    density: density,
+    selectedRows: selectedRows,
+    // Actions
+    toggleSort: toggleSort,
+    addFilter: addFilter,
+    removeFilter: removeFilter,
+    clearFilters: clearFilters,
+    setGlobalFilter: setGlobalFilter,
+    setDensity: setDensity,
+    toggleColumnVisibility: toggleColumnVisibility,
+    toggleRowSelection: toggleRowSelection,
+    selectAllRows: selectAllRows,
+    clearSelection: clearSelection
+  };
+}
+
 var emptyStateIcons = {
   noData: require$$1.jsx(Database, {
     className: "w-12 h-12 text-mw-neutral-400"
@@ -47118,6 +47347,121 @@ function DayView(_ref4) {
   });
 }
 
+function useCalendar(_ref) {
+  var value = _ref.value,
+    _ref$events = _ref.events,
+    events = _ref$events === void 0 ? [] : _ref$events,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? 'month' : _ref$view,
+    onViewChange = _ref.onViewChange,
+    onChange = _ref.onChange,
+    _ref$hourFormat = _ref.hourFormat,
+    hourFormat = _ref$hourFormat === void 0 ? 24 : _ref$hourFormat;
+  var _useState = React.useState(value || new Date()),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentDate = _useState2[0],
+    setCurrentDate = _useState2[1];
+  var _useState3 = React.useState(view),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentView = _useState4[0],
+    setCurrentView = _useState4[1];
+  var today = new Date();
+  var _useMemo = React.useMemo(function () {
+      return {
+        year: currentDate.getFullYear(),
+        month: currentDate.getMonth()
+      };
+    }, [currentDate]),
+    year = _useMemo.year,
+    month = _useMemo.month;
+  var handleViewChange = React.useCallback(function (newView) {
+    setCurrentView(newView);
+    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newView);
+  }, [onViewChange]);
+  var handleDateSelect = React.useCallback(function (date) {
+    setCurrentDate(date);
+    onChange === null || onChange === void 0 ? void 0 : onChange(date);
+  }, [onChange]);
+  var navigateMonth = React.useCallback(function (delta) {
+    setCurrentDate(function (prev) {
+      return new Date(prev.getFullYear(), prev.getMonth() + delta, 1);
+    });
+  }, []);
+  var navigateWeek = React.useCallback(function (delta) {
+    setCurrentDate(function (prev) {
+      var d = new Date(prev);
+      d.setDate(d.getDate() + delta * 7);
+      return d;
+    });
+  }, []);
+  var navigateDay = React.useCallback(function (delta) {
+    setCurrentDate(function (prev) {
+      var d = new Date(prev);
+      d.setDate(d.getDate() + delta);
+      return d;
+    });
+  }, []);
+  var goToToday = React.useCallback(function () {
+    setCurrentDate(new Date());
+  }, []);
+  var getEventsForDate = React.useCallback(function (date) {
+    return events.filter(function (event) {
+      return event.date.toDateString() === date.toDateString();
+    });
+  }, [events]);
+  var getEventsForTimeSlot = React.useCallback(function (date, timeSlot) {
+    var dateEvents = getEventsForDate(date);
+    return dateEvents.filter(function (event) {
+      if (event.allDay) return false;
+      if (!event.startTime) return false;
+      var eventStart = event.startTime;
+      return eventStart === timeSlot;
+    });
+  }, [getEventsForDate]);
+  var formatTime = React.useCallback(function (time) {
+    if (hourFormat === 12) {
+      var _time$split$map = time.split(':').map(Number),
+        _time$split$map2 = _slicedToArray(_time$split$map, 2),
+        hours = _time$split$map2[0],
+        minutes = _time$split$map2[1];
+      var ampm = hours >= 12 ? 'PM' : 'AM';
+      var displayHours = hours % 12 || 12;
+      return "".concat(displayHours, ":").concat(minutes.toString().padStart(2, '0'), " ").concat(ampm);
+    }
+    return time;
+  }, [hourFormat]);
+  var getWeekDates = React.useCallback(function (date) {
+    var startOfWeek = new Date(date);
+    var day = startOfWeek.getDay();
+    var diff = startOfWeek.getDate() - day + (day === 0 ? -6 : 1);
+    startOfWeek.setDate(diff);
+    var weekDates = [];
+    for (var i = 0; i < 7; i++) {
+      var weekDate = new Date(startOfWeek);
+      weekDate.setDate(startOfWeek.getDate() + i);
+      weekDates.push(weekDate);
+    }
+    return weekDates;
+  }, []);
+  return {
+    currentDate: currentDate,
+    currentView: currentView,
+    today: today,
+    year: year,
+    month: month,
+    handleViewChange: handleViewChange,
+    handleDateSelect: handleDateSelect,
+    navigateMonth: navigateMonth,
+    navigateWeek: navigateWeek,
+    navigateDay: navigateDay,
+    goToToday: goToToday,
+    getEventsForDate: getEventsForDate,
+    getEventsForTimeSlot: getEventsForTimeSlot,
+    formatTime: formatTime,
+    getWeekDates: getWeekDates
+  };
+}
+
 function cn$8() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];
@@ -49571,7 +49915,8 @@ function AgGridTableInner(props) {
     cacheBlockSize = props.cacheBlockSize,
     footerData = props.footerData,
     _props$pagination = props.pagination,
-    pagination = _props$pagination === void 0 ? true : _props$pagination;
+    pagination = _props$pagination === void 0 ? true : _props$pagination,
+    onBodyScrollEnd = props.onBodyScrollEnd;
   var gridRef = React.useRef(null);
   var apiRef = React.useRef(null);
   var isSortFromExternalRef = React.useRef(false);
@@ -49739,6 +50084,9 @@ function AgGridTableInner(props) {
         paginationPageSize: useGridPagination ? (_a = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSize) !== null && _a !== void 0 ? _a : 10 : undefined,
         paginationPageSizeSelector: useGridPagination ? (_b = serverSideConfig === null || serverSideConfig === void 0 ? void 0 : serverSideConfig.pageSizeSelector) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE_SELECTOR : undefined,
         cacheBlockSize: cacheBlockSize,
+        onBodyScrollEnd: onBodyScrollEnd ? function () {
+          return onBodyScrollEnd();
+        } : undefined,
         pinnedBottomRowData: footerData === null || footerData === void 0 ? void 0 : footerData.map(function (row, i) {
           return _typeof(row) === "object" && row !== null && !("id" in row) ? Object.assign(Object.assign({}, row), {
             id: "pinned-bottom-".concat(i)
@@ -49757,6 +50105,420 @@ function AgGridTableInner(props) {
 }
 var AgGridTable = AgGridTableInner;
 
+/**
+ * A mobile-optimized card for displaying a single data row.
+ * Replaces AG Grid table rows on mobile viewports.
+ * Minimum 44px touch target when clickable.
+ */
+var MobileDataCard = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var title = _a.title,
+    subtitle = _a.subtitle,
+    statusBadge = _a.statusBadge,
+    fields = _a.fields,
+    actions = _a.actions,
+    onClick = _a.onClick,
+    className = _a.className,
+    props = __rest$1(_a, ["title", "subtitle", "statusBadge", "fields", "actions", "onClick", "className"]);
+  return require$$1.jsxs("div", Object.assign({
+    ref: ref,
+    role: onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
+    onClick: onClick,
+    onKeyDown: onClick ? function (e) {
+      if (e.key === 'Enter') onClick();
+    } : undefined,
+    className: clsx('rounded-lg border border-mw-neutral-200 bg-white p-4', 'dark:border-mw-neutral-700 dark:bg-mw-neutral-800', onClick && 'cursor-pointer hover:border-mw-primary-300 dark:hover:border-mw-primary-600 min-h-[44px]', className)
+  }, props, {
+    children: [require$$1.jsxs("div", {
+      className: "flex items-start justify-between gap-2",
+      children: [require$$1.jsxs("div", {
+        className: "flex-1 min-w-0",
+        children: [require$$1.jsx("p", {
+          className: "text-sm font-medium text-mw-neutral-900 dark:text-mw-neutral-100 truncate",
+          children: title
+        }), subtitle && require$$1.jsx("p", {
+          className: "text-xs text-mw-neutral-500 dark:text-mw-neutral-400 mt-0.5",
+          children: subtitle
+        })]
+      }), require$$1.jsxs("div", {
+        className: "flex items-center gap-2 flex-shrink-0",
+        children: [statusBadge, actions]
+      })]
+    }), fields.length > 0 && require$$1.jsx("div", {
+      className: "grid grid-cols-2 gap-x-4 gap-y-2 mt-3",
+      children: fields.map(function (_ref) {
+        var label = _ref.label,
+          value = _ref.value;
+        return require$$1.jsxs("div", {
+          children: [require$$1.jsx("p", {
+            className: "text-xs text-mw-neutral-500 dark:text-mw-neutral-400",
+            children: label
+          }), require$$1.jsx("p", {
+            className: "text-sm text-mw-neutral-900 dark:text-mw-neutral-100",
+            children: value
+          })]
+        }, label);
+      })
+    })]
+  }));
+}));
+MobileDataCard.displayName = 'MobileDataCard';
+
+/**
+ * Prev/Next pagination for mobile card lists.
+ * Shows "Page X of Y" with disabled states at boundaries.
+ */
+var MobilePagination = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var page = _a.page,
+    totalPages = _a.totalPages,
+    onPageChange = _a.onPageChange,
+    className = _a.className,
+    props = __rest$1(_a, ["page", "totalPages", "onPageChange", "className"]);
+  return require$$1.jsxs("div", Object.assign({
+    ref: ref,
+    className: clsx('flex items-center justify-between px-2 py-3', className)
+  }, props, {
+    children: [require$$1.jsx("button", {
+      type: "button",
+      "aria-label": "Previous page",
+      disabled: page <= 1,
+      onClick: function onClick() {
+        return onPageChange(page - 1);
+      },
+      className: clsx('px-3 py-2 text-sm font-medium rounded-md min-h-[44px] min-w-[44px]', 'border border-mw-neutral-200 dark:border-mw-neutral-700', 'text-mw-neutral-700 dark:text-mw-neutral-300', 'enabled:hover:bg-mw-neutral-50 enabled:dark:hover:bg-mw-neutral-800', 'disabled:opacity-50 disabled:cursor-not-allowed'),
+      children: "\u2190"
+    }), require$$1.jsxs("span", {
+      className: "text-sm text-mw-neutral-600 dark:text-mw-neutral-400",
+      children: [page, " / ", totalPages]
+    }), require$$1.jsx("button", {
+      type: "button",
+      "aria-label": "Next page",
+      disabled: page >= totalPages,
+      onClick: function onClick() {
+        return onPageChange(page + 1);
+      },
+      className: clsx('px-3 py-2 text-sm font-medium rounded-md min-h-[44px] min-w-[44px]', 'border border-mw-neutral-200 dark:border-mw-neutral-700', 'text-mw-neutral-700 dark:text-mw-neutral-300', 'enabled:hover:bg-mw-neutral-50 enabled:dark:hover:bg-mw-neutral-800', 'disabled:opacity-50 disabled:cursor-not-allowed'),
+      children: "\u2192"
+    })]
+  }));
+});
+MobilePagination.displayName = 'MobilePagination';
+
+/**
+ * A mobile-optimized toolbar with search input and optional filter button.
+ * Filter button shows an active count badge when filters are applied.
+ */
+var MobileToolbar = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var searchValue = _a.searchValue,
+    onSearchChange = _a.onSearchChange,
+    _a$searchPlaceholder = _a.searchPlaceholder,
+    searchPlaceholder = _a$searchPlaceholder === void 0 ? 'Search...' : _a$searchPlaceholder,
+    onFilterClick = _a.onFilterClick,
+    activeFilterCount = _a.activeFilterCount,
+    className = _a.className,
+    props = __rest$1(_a, ["searchValue", "onSearchChange", "searchPlaceholder", "onFilterClick", "activeFilterCount", "className"]);
+  return require$$1.jsxs("div", Object.assign({
+    ref: ref,
+    className: clsx('flex items-center gap-2', className)
+  }, props, {
+    children: [require$$1.jsxs("div", {
+      className: "relative flex-1",
+      children: [require$$1.jsxs("svg", {
+        className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [require$$1.jsx("circle", {
+          cx: "11",
+          cy: "11",
+          r: "8"
+        }), require$$1.jsx("path", {
+          d: "m21 21-4.3-4.3"
+        })]
+      }), require$$1.jsx("input", {
+        type: "search",
+        role: "searchbox",
+        value: searchValue,
+        onChange: function onChange(e) {
+          return onSearchChange(e.target.value);
+        },
+        placeholder: searchPlaceholder,
+        className: clsx('w-full h-11 pl-10 pr-4 text-sm rounded-lg', 'border border-mw-neutral-200 bg-white', 'dark:border-mw-neutral-700 dark:bg-mw-neutral-800', 'text-mw-neutral-900 dark:text-mw-neutral-100', 'placeholder:text-mw-neutral-400 dark:placeholder:text-mw-neutral-500', 'focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-mw-primary-500')
+      })]
+    }), onFilterClick && require$$1.jsxs("button", {
+      type: "button",
+      "aria-label": "Filters",
+      onClick: onFilterClick,
+      className: clsx('relative flex items-center justify-center h-11 w-11 rounded-lg', 'border border-mw-neutral-200 bg-white', 'dark:border-mw-neutral-700 dark:bg-mw-neutral-800', 'text-mw-neutral-700 dark:text-mw-neutral-300', 'hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-700'),
+      children: [require$$1.jsxs("svg", {
+        className: "h-5 w-5",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [require$$1.jsx("line", {
+          x1: "4",
+          x2: "4",
+          y1: "21",
+          y2: "14"
+        }), require$$1.jsx("line", {
+          x1: "4",
+          x2: "4",
+          y1: "10",
+          y2: "3"
+        }), require$$1.jsx("line", {
+          x1: "12",
+          x2: "12",
+          y1: "21",
+          y2: "12"
+        }), require$$1.jsx("line", {
+          x1: "12",
+          x2: "12",
+          y1: "8",
+          y2: "3"
+        }), require$$1.jsx("line", {
+          x1: "20",
+          x2: "20",
+          y1: "21",
+          y2: "16"
+        }), require$$1.jsx("line", {
+          x1: "20",
+          x2: "20",
+          y1: "12",
+          y2: "3"
+        }), require$$1.jsx("line", {
+          x1: "2",
+          x2: "6",
+          y1: "14",
+          y2: "14"
+        }), require$$1.jsx("line", {
+          x1: "10",
+          x2: "14",
+          y1: "8",
+          y2: "8"
+        }), require$$1.jsx("line", {
+          x1: "18",
+          x2: "22",
+          y1: "16",
+          y2: "16"
+        })]
+      }), activeFilterCount != null && activeFilterCount > 0 && require$$1.jsx("span", {
+        className: "absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-mw-primary-500 text-[10px] font-bold text-white",
+        children: activeFilterCount
+      })]
+    })]
+  }));
+});
+MobileToolbar.displayName = 'MobileToolbar';
+
+/**
+ * Renders children only on mobile (hidden on md+ screens).
+ * Uses CSS-based visibility — both layouts are in the DOM.
+ */
+var MobileOnly = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest$1(_a, ["children", "className"]);
+  return require$$1.jsx("div", Object.assign({
+    ref: ref,
+    className: clsx('md:hidden', className)
+  }, props, {
+    children: children
+  }));
+});
+MobileOnly.displayName = 'MobileOnly';
+
+/**
+ * Renders children only on desktop (hidden below md breakpoint).
+ * Uses CSS-based visibility — both layouts are in the DOM.
+ */
+var DesktopOnly = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest$1(_a, ["children", "className"]);
+  return require$$1.jsx("div", Object.assign({
+    ref: ref,
+    className: clsx('hidden md:block', className)
+  }, props, {
+    children: children
+  }));
+});
+DesktopOnly.displayName = 'DesktopOnly';
+
+var breakpointRowClass = {
+  sm: 'sm:flex-row',
+  md: 'md:flex-row',
+  lg: 'lg:flex-row',
+  xl: 'xl:flex-row'
+};
+/**
+ * Stacks children vertically on mobile, horizontally on desktop.
+ * Replaces the common `flex flex-col md:flex-row` pattern.
+ */
+var ResponsiveStack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$breakpoint = _a.breakpoint,
+    breakpoint = _a$breakpoint === void 0 ? 'md' : _a$breakpoint,
+    gap = _a.gap,
+    _a$reverse = _a.reverse,
+    reverse = _a$reverse === void 0 ? false : _a$reverse,
+    children = _a.children,
+    className = _a.className,
+    props = __rest$1(_a, ["breakpoint", "gap", "reverse", "children", "className"]);
+  return require$$1.jsx("div", Object.assign({
+    ref: ref,
+    className: clsx('flex', reverse ? 'flex-col-reverse' : 'flex-col', breakpointRowClass[breakpoint], gap != null && "gap-".concat(gap), className)
+  }, props, {
+    children: children
+  }));
+});
+ResponsiveStack.displayName = 'ResponsiveStack';
+
+/**
+ * A collapsible panel for secondary information on mobile.
+ * Wraps the design system Accordion for converting sidebar panels
+ * (tips, insights, help text) into expandable sections.
+ */
+var CollapsibleInfoPanel = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var title = _a.title,
+    icon = _a.icon,
+    _a$defaultOpen = _a.defaultOpen,
+    defaultOpen = _a$defaultOpen === void 0 ? false : _a$defaultOpen,
+    children = _a.children,
+    className = _a.className,
+    props = __rest$1(_a, ["title", "icon", "defaultOpen", "children", "className"]);
+  return require$$1.jsx("div", Object.assign({
+    ref: ref,
+    className: clsx(className)
+  }, props, {
+    children: require$$1.jsx(Accordion, {
+      type: "single",
+      defaultValue: defaultOpen ? 'panel' : undefined,
+      children: require$$1.jsxs(AccordionItem, {
+        value: "panel",
+        children: [require$$1.jsxs(AccordionTrigger, {
+          className: clsx('flex items-center gap-2 text-sm font-medium', 'text-mw-neutral-900 dark:text-mw-neutral-100'),
+          children: [icon && require$$1.jsx("span", {
+            className: "flex-shrink-0",
+            children: icon
+          }), title]
+        }), require$$1.jsx(AccordionContent, {
+          children: require$$1.jsx("div", {
+            className: "pt-2",
+            children: children
+          })
+        })]
+      })
+    })
+  }));
+});
+CollapsibleInfoPanel.displayName = 'CollapsibleInfoPanel';
+
+/**
+ * Renders content that is visually hidden but accessible to screen readers.
+ * Use this instead of ad-hoc `sr-only` classes for consistent accessibility.
+ */
+var VisuallyHidden = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$as = _a.as,
+    Component = _a$as === void 0 ? 'span' : _a$as,
+    children = _a.children,
+    style = _a.style,
+    props = __rest$1(_a, ["as", "children", "style"]);
+  return require$$1.jsx(Component, Object.assign({
+    ref: ref,
+    style: Object.assign({
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      borderWidth: 0
+    }, style)
+  }, props, {
+    children: children
+  }));
+});
+VisuallyHidden.displayName = 'VisuallyHidden';
+
+var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+/**
+ * Traps keyboard focus within its children.
+ * Use in modals, dialogs, and sheets to prevent focus from escaping.
+ */
+var FocusScope = /*#__PURE__*/React.forwardRef(function (_a, _ref) {
+  var _a$trapped = _a.trapped,
+    trapped = _a$trapped === void 0 ? false : _a$trapped,
+    _a$autoFocus = _a.autoFocus,
+    autoFocus = _a$autoFocus === void 0 ? false : _a$autoFocus,
+    onEscape = _a.onEscape,
+    children = _a.children,
+    className = _a.className,
+    props = __rest$1(_a, ["trapped", "autoFocus", "onEscape", "children", "className"]);
+  var containerRef = React.useRef(null);
+  var getFocusableElements = React.useCallback(function () {
+    if (!containerRef.current) return [];
+    return Array.from(containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR));
+  }, []);
+  React.useEffect(function () {
+    if (!autoFocus || !containerRef.current) return;
+    var focusable = getFocusableElements();
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+  }, [autoFocus, getFocusableElements]);
+  React.useEffect(function () {
+    if (!trapped || !containerRef.current) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape' && onEscape) {
+        onEscape();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      var focusable = getFocusableElements();
+      if (focusable.length === 0) return;
+      var first = focusable[0];
+      var last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    var container = containerRef.current;
+    container.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return container.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [trapped, onEscape, getFocusableElements]);
+  return require$$1.jsx("div", Object.assign({
+    ref: function ref(node) {
+      containerRef.current = node;
+      if (typeof _ref === 'function') _ref(node);else if (_ref) _ref.current = node;
+    },
+    className: clsx(className)
+  }, props, {
+    children: children
+  }));
+});
+FocusScope.displayName = 'FocusScope';
+
 function PageHeader(_a) {
   var title = _a.title,
     description = _a.description,
@@ -57640,6 +58402,7 @@ exports.CodeSnippet = CodeSnippet;
 exports.Collapsible = Collapsible;
 exports.CollapsibleCode = CollapsibleCode;
 exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleInfoPanel = CollapsibleInfoPanel;
 exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.ColumnCustomizationDrawer = ColumnCustomizationDrawer;
 exports.Command = Command;
@@ -57653,6 +58416,7 @@ exports.DataGrid = DataGrid;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DescriptionList = DescriptionList;
+exports.DesktopOnly = DesktopOnly;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
@@ -57681,6 +58445,7 @@ exports.FileUpload = FileUpload;
 exports.Filter = Filter;
 exports.FlexContainer = FlexContainer;
 exports.FloatingElement = FloatingElement;
+exports.FocusScope = FocusScope;
 exports.Footer = Footer;
 exports.Form = Form;
 exports.FormActions = FormActions;
@@ -57722,6 +58487,10 @@ exports.MenuRadioItem = MenuRadioItem;
 exports.MenuSeparator = MenuSeparator;
 exports.MetricCard = MetricCard;
 exports.MinusIcon = MinusIcon;
+exports.MobileDataCard = MobileDataCard;
+exports.MobileOnly = MobileOnly;
+exports.MobilePagination = MobilePagination;
+exports.MobileToolbar = MobileToolbar;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
@@ -57754,6 +58523,7 @@ exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.Rating = Rating;
 exports.ResponsiveContainer = ResponsiveContainer;
+exports.ResponsiveStack = ResponsiveStack;
 exports.RichTextEditor = RichTextEditor;
 exports.ScheduleGrid = ScheduleGrid;
 exports.ScrollArea = ScrollArea;
@@ -57830,6 +58600,7 @@ exports.ToggleGroupItem = ToggleGroupItem;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
 exports.VideoThumbnail = VideoThumbnail;
+exports.VisuallyHidden = VisuallyHidden;
 exports.borderRadius = borderRadius;
 exports.borderWidth = borderWidth;
 exports.breakpoints = breakpoints;
@@ -57849,6 +58620,8 @@ exports.shadows = shadows;
 exports.spacing = spacing;
 exports.tokens = tokens;
 exports.typography = typography;
+exports.useAdvancedTable = useAdvancedTable;
+exports.useCalendar = useCalendar;
 exports.useDragDrop = useDragDrop;
 exports.useFormContext = useFormContext;
 exports.useIconSearch = useIconSearch;