@raystack/apsara 0.13.0 → 0.14.0

package/dist/index.css

@@ -1832,7 +1832,11 @@ html[data-theme="dark"] {
 }
 
 .calendar-module_cell__TTpcD:has([aria-selected="true"]) {
-  background-color: var(--background-inverted);
+  background-color: var(--background-highlight);
+
+  button {
+    color: var(--foreground-inverted);
+  }
 }
 
 .calendar-module_cell__TTpcD:has(.calendar-module_day_today__P35-i):not(:has([aria-selected="true"])) {
@@ -1842,6 +1846,9 @@ html[data-theme="dark"] {
 .calendar-module_cell__TTpcD:has(.calendar-module_day_range_middle__3yKS1) {
   border-radius: 0;
   background-color: var(--background-base-hover);
+  button {
+    color: var(--foreground-base);
+  }
 }
 
 .calendar-module_cell__TTpcD:has(.calendar-module_day_range_start__Qyhit):not(:has(.calendar-module_day_range_end__YF0ad)) {
@@ -1881,6 +1888,21 @@ html[data-theme="dark"] {
   color: var(--foreground-inverted);
 }
 
+.calendar-module_months__IN75k {
+  display: flex;
+  gap: var(--pd-8);
+}
+
+.calendar-module_calendarPopover__PY4sa {
+  padding: 0;
+  border: none;
+  min-width: max-content;
+}
+
+.calendar-module_datePickerInput__aOnRQ {
+  cursor: pointer;
+}
+
 .textfield-module_textfield__u4AGg {
   appearance: none;
   box-sizing: border-box;
@@ -1954,6 +1976,11 @@ html[data-theme="dark"] {
 .textfield-module_textfield-leading__AE-ld {
   padding-left: 32px;
 }
+
+.textfield-module_textfield-trailing__Hj2jX {
+  padding-right: 32px;
+}
+
 .datatable-module_wrapper__Sxg2d {
   width: 100%;
   height: 100%;
@@ -1997,6 +2024,14 @@ html[data-theme="dark"] {
   min-width: fit-content;
 }
 
+.datatable-module_filterText__w00L8 {
+  min-width: fit-content;
+}
+
+.datatable-module_flex1__fA-kQ {
+  flex: 1;
+}
+
 .table-module_table__mqnXB {
   width: 100%;
   font-size: 12px;

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { Sidebar } from "./sidebar";
 export { Switch } from "./switch";
 export { Tooltip } from "./tooltip";
 export { ToggleGroup } from "./toggle-group";
-export { Calendar } from "./calendar";
+export { Calendar, DatePicker, RangePicker } from "./calendar";
 export { ApsaraAggregationFn, ApsaraAggregationOption, ApsaraColumnDef, ApsaraFilterFn, ApsaraFilterOption, DataTable, Table, useTable, } from "./table";
 export { Tabs } from "./tabs";
 export { Text } from "./text";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,KAAK,EACL,QAAQ,GACT,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,KAAK,EACL,QAAQ,GACT,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -3,6 +3,8 @@ import React__default, { createContext, useMemo, createElement, useContext, useC
 import * as $7SXl2$reactdom from 'react-dom';
 import $7SXl2$reactdom__default, { flushSync, createPortal } from 'react-dom';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -2426,6 +2428,28 @@ var ArrowUpIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$I = ["color"];
+var CalendarIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$I);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$T = ["color"];
 var CheckIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -9699,8 +9723,8 @@ const getHeadline = (status = "Something gone wrong") => {
     }
 };
 const errorstate = cva(styles$n.errorstate);
-function ErrorState({ children, className, status, icon, ...props }) {
-    return (jsxRuntimeExports$1.jsx(Flex, { justify: "center", style: { width: "100%", height: "100%" }, children: jsxRuntimeExports$1.jsxs(Flex, { direction: "column", gap: "large", align: "center", justify: "center", className: errorstate({ className }), style: { textAlign: "center", maxWidth: "400px" }, ...props, children: [icon ? icon : getIcon(status), jsxRuntimeExports$1.jsxs(Flex, { direction: "column", gap: "medium", children: [jsxRuntimeExports$1.jsx(Headline, { size: "large", children: getHeadline(status) }), jsxRuntimeExports$1.jsx(Body, { size: "large", children: getMessage(status) })] })] }) }));
+function ErrorState({ children, className, status, icon, message, ...props }) {
+    return (jsxRuntimeExports$1.jsx(Flex, { justify: "center", style: { width: "100%", height: "100%" }, children: jsxRuntimeExports$1.jsxs(Flex, { direction: "column", gap: "large", align: "center", justify: "center", className: errorstate({ className }), style: { textAlign: "center", maxWidth: "400px" }, ...props, children: [icon ? icon : getIcon(status), jsxRuntimeExports$1.jsxs(Flex, { direction: "column", gap: "medium", children: [jsxRuntimeExports$1.jsx(Headline, { size: "large", children: getHeadline(status) }), jsxRuntimeExports$1.jsx(Body, { size: "large", children: message ? message : getMessage(status) })] })] }) }));
 }
 
 var styles$m = {"grid":"grid-module_grid__UQeew","align-start":"grid-module_align-start__Z7pvl","align-center":"grid-module_align-center__Rwlbt","align-end":"grid-module_align-end__nuXn1","align-stretch":"grid-module_align-stretch__6SP1w","align-baseline":"grid-module_align-baseline__ajEPv","justify-start":"grid-module_justify-start__hRYMn","justify-center":"grid-module_justify-center__zQ7Ym","justify-end":"grid-module_justify-end__92x6b","justify-between":"grid-module_justify-between__vQXi3","flow-row":"grid-module_flow-row__bI9DV","flow-column":"grid-module_flow-column__lsmAV","flow-dense":"grid-module_flow-dense__rAnOn","flow-rowDense":"grid-module_flow-rowDense__vvLwD","flow-columnDense":"grid-module_flow-columnDense__HnI7j","columns-1":"grid-module_columns-1__ISyE5","columns-2":"grid-module_columns-2__nAJXX","columns-3":"grid-module_columns-3__jSanv","columns-4":"grid-module_columns-4__TPrmV","gap-xs":"grid-module_gap-xs__jJXAg","gap-sm":"grid-module_gap-sm__lSOTF","gap-md":"grid-module_gap-md__d44tx","gap-lg":"grid-module_gap-lg__QxI9L","gap-xl":"grid-module_gap-xl__0VXE9","gapX-xs":"grid-module_gapX-xs__vCzot","gapX-sm":"grid-module_gapX-sm__3p68N","gapX-md":"grid-module_gapX-md__JPO3S","gapX-lg":"grid-module_gapX-lg__qFCBX","gapX-xl":"grid-module_gapX-xl__J141F","gapY-xs":"grid-module_gapY-xs__yx6Mm","gapY-sm":"grid-module_gapY-sm__uopNl","gapY-md":"grid-module_gapY-md__4XBeo","gapY-lg":"grid-module_gapY-lg__QrF6Z","gapY-xl":"grid-module_gapY-xl__Y6SHF"};
@@ -10015,7 +10039,8 @@ const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f
 
 var styles$i = {"popover":"popover-module_popover__Jh8Hg"};
 
-const PopoverContent = React__default.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (jsxRuntimeExports$1.jsx($cb5cc270b50c6fcd$export$602eac185826482c, { children: jsxRuntimeExports$1.jsx($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, className: styles$i.popover, ...props }) })));
+const popoverContent = cva(styles$i.popover);
+const PopoverContent = React__default.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (jsxRuntimeExports$1.jsx($cb5cc270b50c6fcd$export$602eac185826482c, { children: jsxRuntimeExports$1.jsx($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, className: popoverContent({ className }), ...props }) })));
 PopoverContent.displayName = $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2.displayName;
 const Popover = Object.assign($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, {
     Trigger: $cb5cc270b50c6fcd$export$41fb9f06171c75f4,
@@ -28101,7 +28126,7 @@ function DayPicker(props) {
     return (jsxRuntimeExports.jsx(RootProvider, __assign({}, props, { children: jsxRuntimeExports.jsx(Root, { initialProps: props }) })));
 }
 
-var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption":"calendar-module_caption__KH06I","caption_label":"calendar-module_caption_label__C5Ys7","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","head":"calendar-module_head__EIxyS","head_cell":"calendar-module_head_cell__z8NlN","cell":"calendar-module_cell__TTpcD","day_today":"calendar-module_day_today__P35-i","day_range_middle":"calendar-module_day_range_middle__3yKS1","day_range_start":"calendar-module_day_range_start__Qyhit","day_range_end":"calendar-module_day_range_end__YF0ad","row":"calendar-module_row__cjS3G","day":"calendar-module_day__rQFGK","day_outside":"calendar-module_day_outside__WN68B"};
+var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption":"calendar-module_caption__KH06I","caption_label":"calendar-module_caption_label__C5Ys7","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","head":"calendar-module_head__EIxyS","head_cell":"calendar-module_head_cell__z8NlN","cell":"calendar-module_cell__TTpcD","day_today":"calendar-module_day_today__P35-i","day_range_middle":"calendar-module_day_range_middle__3yKS1","day_range_start":"calendar-module_day_range_start__Qyhit","day_range_end":"calendar-module_day_range_end__YF0ad","row":"calendar-module_row__cjS3G","day":"calendar-module_day__rQFGK","day_outside":"calendar-module_day_outside__WN68B","months":"calendar-module_months__IN75k","calendarPopover":"calendar-module_calendarPopover__PY4sa","datePickerInput":"calendar-module_datePickerInput__aOnRQ"};
 
 const root$1 = cva(styles$6.calendarRoot);
 const Calendar = function ({ className, classNames, showOutsideDays = true, ...props }) {
@@ -28125,10 +28150,100 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, ...p
             day_range_middle: styles$6.day_range_middle,
             day_range_end: styles$6.day_range_end,
             day_range_start: styles$6.day_range_start,
+            months: styles$6.months,
             ...classNames,
         }, className: root$1({ className }), ...props }));
 };
 
+var styles$5 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invlid":"textfield-module_textfield-invlid__zo9MF","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld","textfield-trailing":"textfield-module_textfield-trailing__Hj2jX"};
+
+const textfield = cva(styles$5.textfield, {
+    variants: {
+        size: {
+            small: styles$5["textfield-sm"],
+            medium: styles$5["textfield-md"],
+        },
+        state: {
+            invalid: styles$5["textfield-invalid"],
+            valid: styles$5["textfield-valid"],
+        },
+        hasLeadingElement: {
+            true: styles$5["textfield-leading"],
+        },
+        hasTrailingElement: {
+            true: styles$5["textfield-trailing"],
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+const TextField = forwardRef(({ leading, trailing, className, src, size, state, style, ...props }, ref) => {
+    const hasLeadingElement = Boolean(leading);
+    const hasTrailingElement = Boolean(trailing);
+    return (jsxRuntimeExports$1.jsxs(Flex, { align: "center", style: { position: "relative", width: "100%" }, children: [hasLeadingElement ? (jsxRuntimeExports$1.jsx(Flex, { style: { position: "absolute", left: "8px" }, children: leading })) : null, jsxRuntimeExports$1.jsx("input", { className: cx(textfield({
+                    size,
+                    state,
+                    className,
+                    hasLeadingElement,
+                    hasTrailingElement,
+                })), ...props, ref: ref }), hasTrailingElement ? (jsxRuntimeExports$1.jsx(Flex, { style: { position: "absolute", right: "8px" }, children: trailing })) : null] }));
+});
+TextField.displayName = "TextField";
+
+var dayjs_min = {exports: {}};
+
+(function (module, exports) {
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+} (dayjs_min));
+
+var dayjs_minExports = dayjs_min.exports;
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
+function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, value = new Date(), onSelect = () => { }, }) {
+    const [showCalendar, setShowCalendar] = useState(false);
+    const dateValue = dayjs(value).format(dateFormat);
+    const handleSelect = (day, selectedDay) => {
+        const selected = day || selectedDay;
+        onSelect(selected);
+        setShowCalendar(false);
+    };
+    function onOpenChange(open) {
+        setShowCalendar(Boolean(open));
+    }
+    return (jsxRuntimeExports$1.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports$1.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports$1.jsx(TextField, { value: dateValue, trailing: jsxRuntimeExports$1.jsx(CalendarIcon, {}), className: styles$6.datePickerInput, readOnly: true, ...textFieldProps }) }), jsxRuntimeExports$1.jsx(Popover.Content, { side: side, className: styles$6.calendarPopover, children: jsxRuntimeExports$1.jsx(Calendar, { ...calendarProps, mode: "single", selected: value, defaultMonth: value, onSelect: handleSelect }) })] }));
+}
+
+function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, calendarProps, onSelect = () => { }, value = {
+    to: new Date(),
+    from: new Date(),
+}, pickerGroupClassName, }) {
+    const [showCalendar, setShowCalendar] = useState(false);
+    const [currentRangeField, setCurrentRangeField] = useState("from");
+    const startDate = dayjs(value.from).format(dateFormat);
+    const endDate = dayjs(value.to).format(dateFormat);
+    // 1st click will select the start date.
+    // 2nd click will select the end date.
+    // 3rd click will select the start date again.
+    const handleSelect = (range, selectedDay) => {
+        const from = value?.from || range?.from;
+        if (currentRangeField === "to" && dayjs(selectedDay).isAfter(dayjs(from))) {
+            // update the end date
+            onSelect({ from, to: selectedDay });
+            setCurrentRangeField("from");
+        }
+        else {
+            // reset the range and select start day
+            onSelect({ from: selectedDay });
+            setCurrentRangeField("to");
+        }
+    };
+    function onOpenChange(open) {
+        setShowCalendar(Boolean(open));
+    }
+    return (jsxRuntimeExports$1.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports$1.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports$1.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports$1.jsx(TextField, { value: startDate, trailing: jsxRuntimeExports$1.jsx(CalendarIcon, {}), className: styles$6.datePickerInput, readOnly: true, ...textFieldProps }), jsxRuntimeExports$1.jsx(TextField, { value: endDate, trailing: jsxRuntimeExports$1.jsx(CalendarIcon, {}), className: styles$6.datePickerInput, readOnly: true, ...textFieldProps })] }) }), jsxRuntimeExports$1.jsx(Popover.Content, { side: side, className: styles$6.calendarPopover, children: jsxRuntimeExports$1.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: value.from, ...calendarProps, mode: "range", selected: value, onSelect: handleSelect }) })] }));
+}
+
 /**
  * table-core
  *
@@ -31607,43 +31722,41 @@ function DataTableFilterOptions({ children, ...props }) {
                     })] })) : null] }));
 }
 
-var styles$5 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invlid":"textfield-module_textfield-invlid__zo9MF","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld"};
-
-const textfield = cva(styles$5.textfield, {
-    variants: {
-        size: {
-            small: styles$5["textfield-sm"],
-            medium: styles$5["textfield-md"],
-        },
-        state: {
-            invalid: styles$5["textfield-invalid"],
-            valid: styles$5["textfield-valid"],
-        },
-        leading: {
-            true: styles$5["textfield-leading"],
-        },
-    },
-    defaultVariants: {
-        size: "small",
-    },
-});
-const TextField = forwardRef(({ leading, className, src, size, state, style, ...props }, ref) => {
-    return (jsxRuntimeExports$1.jsxs(Flex, { align: "center", style: { position: "relative", width: "100%" }, children: [leading ? (jsxRuntimeExports$1.jsx(Flex, { style: { position: "absolute", left: "8px" }, children: leading })) : null, jsxRuntimeExports$1.jsx("input", { className: cx(textfield({ size, state, className, leading })), style: leading ? { paddingLeft: "32px" } : {}, ...props, ref: ref })] }));
-});
-TextField.displayName = "TextField";
-
-var styles$4 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","table":"datatable-module_table__x2IkY","head":"datatable-module_head__zCfCW","toolbar":"datatable-module_toolbar__lO-aI","chip":"datatable-module_chip__IiwTD","chipWrapper":"datatable-module_chipWrapper__iz69x","filterOperator":"datatable-module_filterOperator__qtDsH"};
+var styles$4 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","table":"datatable-module_table__x2IkY","head":"datatable-module_head__zCfCW","toolbar":"datatable-module_toolbar__lO-aI","chip":"datatable-module_chip__IiwTD","chipWrapper":"datatable-module_chipWrapper__iz69x","filterOperator":"datatable-module_filterOperator__qtDsH","filterText":"datatable-module_filterText__w00L8","flex1":"datatable-module_flex1__fA-kQ"};
 
 const columnTypesMap = {
     select: "select",
     number: "number",
     text: "text",
+    date: "date",
 };
 const filterValueTypeMap = {
     select: "select",
     text: "text",
+    datePicker: "datePicker",
+    rangePicker: "rangePicker",
 };
 
+var isSameOrAfter$1 = {exports: {}};
+
+(function (module, exports) {
+	!function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t){t.prototype.isSameOrAfter=function(e,t){return this.isSame(e,t)||this.isAfter(e,t)};}})); 
+} (isSameOrAfter$1));
+
+var isSameOrAfterExports = isSameOrAfter$1.exports;
+var isSameOrAfter = /*@__PURE__*/getDefaultExportFromCjs(isSameOrAfterExports);
+
+var isSameOrBefore$1 = {exports: {}};
+
+(function (module, exports) {
+	!function(e,i){module.exports=i();}(commonjsGlobal,(function(){return function(e,i){i.prototype.isSameOrBefore=function(e,i){return this.isSame(e,i)||this.isBefore(e,i)};}})); 
+} (isSameOrBefore$1));
+
+var isSameOrBeforeExports = isSameOrBefore$1.exports;
+var isSameOrBefore = /*@__PURE__*/getDefaultExportFromCjs(isSameOrBeforeExports);
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
 const operationsOptions = {
     [columnTypesMap.select]: [
         {
@@ -31759,25 +31872,85 @@ const operationsOptions = {
             hideValueField: true,
         },
     ],
+    [columnTypesMap.date]: [
+        {
+            label: "is",
+            value: "is",
+            fn: (row, columnId, filterValue) => {
+                return dayjs(row.getValue(columnId)).isSame(dayjs(filterValue.date), "day");
+            },
+        },
+        {
+            label: "is before",
+            value: "is before",
+            fn: (row, columnId, filterValue) => {
+                return dayjs(row.getValue(columnId)).isBefore(dayjs(filterValue.date), "day");
+            },
+        },
+        {
+            label: "is after",
+            value: "is after",
+            fn: (row, columnId, filterValue) => {
+                return dayjs(row.getValue(columnId)).isAfter(dayjs(filterValue.date), "day");
+            },
+        },
+        {
+            label: "is between",
+            value: "is between",
+            fn: (row, columnId, filterValue) => {
+                return (dayjs(row.getValue(columnId)).isSameOrAfter(dayjs(filterValue.dateRange?.from), "day") &&
+                    dayjs(row.getValue(columnId)).isSameOrBefore(dayjs(filterValue.dateRange?.to), "day"));
+            },
+            component: "rangePicker",
+        },
+    ],
 };
 
-const FilterValues = ({ columnType = filterValueTypeMap.text, options = [], onValueChange, }) => {
-    const [value, setValue] = useState("");
-    const valueType = columnType === columnTypesMap.select
-        ? filterValueTypeMap.select
-        : filterValueTypeMap.text;
+const getFilterValueType = ({ filterOperation, columnType, }) => {
+    if (filterOperation?.component) {
+        return filterOperation?.component;
+    }
+    else if (columnType === columnTypesMap.date) {
+        return filterValueTypeMap.datePicker;
+    }
+    else if (columnType === columnTypesMap.select) {
+        return filterValueTypeMap.select;
+    }
+    else {
+        return filterValueTypeMap.text;
+    }
+};
+const FilterValues = ({ columnType = filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
+    const [value, setValue] = useState({
+        value: "",
+        date: new Date(),
+        dateRange: {
+            to: new Date(),
+            from: new Date(),
+        },
+    });
+    const valueType = getFilterValueType({ filterOperation, columnType });
     useEffect(() => {
-        if (value && onValueChange) {
-            onValueChange({ value });
+        if (onValueChange) {
+            onValueChange(value);
         }
     }, [value]);
-    return valueType === filterValueTypeMap.select ? (jsxRuntimeExports$1.jsxs(Select, { value: value, onValueChange: setValue, children: [jsxRuntimeExports$1.jsx(Select.Trigger, { children: jsxRuntimeExports$1.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports$1.jsx(Select.Content, { children: options.map((opt) => {
-                    return (jsxRuntimeExports$1.jsx(Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
-                }) })] })) : (jsxRuntimeExports$1.jsx(TextField, { value: value, onChange: (e) => setValue(e.target.value) }));
+    switch (valueType) {
+        case filterValueTypeMap.select:
+            return (jsxRuntimeExports$1.jsxs(Select, { value: value.value, onValueChange: (value) => setValue({ value }), children: [jsxRuntimeExports$1.jsx(Select.Trigger, { children: jsxRuntimeExports$1.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports$1.jsx(Select.Content, { children: options.map((opt) => {
+                            return (jsxRuntimeExports$1.jsx(Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
+                        }) })] }));
+        case filterValueTypeMap.datePicker:
+            return (jsxRuntimeExports$1.jsx(DatePicker, { onSelect: (date) => setValue({ date }), value: value.date }));
+        case filterValueTypeMap.rangePicker:
+            return (jsxRuntimeExports$1.jsx(RangePicker, { onSelect: (dateRange) => setValue({ dateRange }), value: value.dateRange }));
+        default:
+            return (jsxRuntimeExports$1.jsx(TextField, { value: value.value, onChange: (e) => setValue({ value: e.target.value }) }));
+    }
 };
 const Operation = ({ columnType = columnTypesMap.text, onOperationSelect, }) => {
     const options = operationsOptions[columnType] || [];
-    const [value, setValue] = useState(options?.[0].value);
+    const [value, setValue] = useState(options?.[0]?.value);
     useEffect(() => {
         const selectedOption = options.find((o) => o.value === value);
         if (selectedOption) {
@@ -31809,7 +31982,7 @@ const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
         setFilterOperation(undefined);
         setFilterValue({});
     }
-    return (jsxRuntimeExports$1.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports$1.jsx(Text, { children: columnName }), jsxRuntimeExports$1.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports$1.jsx(FilterValues, { columnType: filterVariant, options: options, onValueChange: setFilterValue })), jsxRuntimeExports$1.jsx(Flex, { children: jsxRuntimeExports$1.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
+    return (jsxRuntimeExports$1.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports$1.jsx(Text, { className: styles$4.filterText, children: columnName }), jsxRuntimeExports$1.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports$1.jsx(FilterValues, { columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntimeExports$1.jsx(Flex, { children: jsxRuntimeExports$1.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
 };
 
 function DataTableFilterChips(props) {
@@ -31915,7 +32088,98 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, ShouldShowHeader = true, ...props }) {
+/**
+ * @internal
+ */
+const SkeletonThemeContext = React__default.createContext({});
+
+/* eslint-disable react/no-array-index-key */
+const defaultEnableAnimation = true;
+// For performance & cleanliness, don't add any inline styles unless we have to
+function styleOptionsToCssProperties({ baseColor, highlightColor, width, height, borderRadius, circle, direction, duration, enableAnimation = defaultEnableAnimation, }) {
+    const style = {};
+    if (direction === 'rtl')
+        style['--animation-direction'] = 'reverse';
+    if (typeof duration === 'number')
+        style['--animation-duration'] = `${duration}s`;
+    if (!enableAnimation)
+        style['--pseudo-element-display'] = 'none';
+    if (typeof width === 'string' || typeof width === 'number')
+        style.width = width;
+    if (typeof height === 'string' || typeof height === 'number')
+        style.height = height;
+    if (typeof borderRadius === 'string' || typeof borderRadius === 'number')
+        style.borderRadius = borderRadius;
+    if (circle)
+        style.borderRadius = '50%';
+    if (typeof baseColor !== 'undefined')
+        style['--base-color'] = baseColor;
+    if (typeof highlightColor !== 'undefined')
+        style['--highlight-color'] = highlightColor;
+    return style;
+}
+function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
+    var _a, _b, _c;
+    const contextStyleOptions = React__default.useContext(SkeletonThemeContext);
+    const propsStyleOptions = { ...originalPropsStyleOptions };
+    // DO NOT overwrite style options from the context if `propsStyleOptions`
+    // has properties explicity set to undefined
+    for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
+        if (typeof value === 'undefined') {
+            delete propsStyleOptions[key];
+        }
+    }
+    // Props take priority over context
+    const styleOptions = {
+        ...contextStyleOptions,
+        ...propsStyleOptions,
+        circle,
+    };
+    // `styleProp` has the least priority out of everything
+    const style = {
+        ...styleProp,
+        ...styleOptionsToCssProperties(styleOptions),
+    };
+    let className = 'react-loading-skeleton';
+    if (customClassName)
+        className += ` ${customClassName}`;
+    const inline = (_a = styleOptions.inline) !== null && _a !== void 0 ? _a : false;
+    const elements = [];
+    const countCeil = Math.ceil(count);
+    for (let i = 0; i < countCeil; i++) {
+        let thisStyle = style;
+        if (countCeil > count && i === countCeil - 1) {
+            // count is not an integer and we've reached the last iteration of
+            // the loop, so add a "fractional" skeleton.
+            //
+            // For example, if count is 3.5, we've already added 3 full
+            // skeletons, so now we add one more skeleton that is 0.5 times the
+            // original width.
+            const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : '100%'; // 100% is the default since that's what's in the CSS
+            const fractionalPart = count % 1;
+            const fractionalWidth = typeof width === 'number'
+                ? width * fractionalPart
+                : `calc(${width} * ${fractionalPart})`;
+            thisStyle = { ...thisStyle, width: fractionalWidth };
+        }
+        const skeletonSpan = (React__default.createElement("span", { className: className, style: thisStyle, key: i }, "\u200C"));
+        if (inline) {
+            elements.push(skeletonSpan);
+        }
+        else {
+            // Without the <br />, the skeleton lines will all run together if
+            // `width` is specified
+            elements.push(React__default.createElement(React__default.Fragment, { key: i },
+                skeletonSpan,
+                React__default.createElement("br", null)));
+        }
+    }
+    return (React__default.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper
+        ? elements.map((el, i) => React__default.createElement(Wrapper, { key: i }, el))
+        : elements));
+}
+
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = React__default.useState({});
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -31934,6 +32198,9 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, Shoul
         if (colId && tableCustomFilter.hasOwnProperty(colId)) {
             col.filterFn = tableCustomFilter[colId];
         }
+        col.cell = isLoading
+            ? () => (jsxRuntimeExports$1.jsx(Skeleton, { containerClassName: styles$4.flex1, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" }))
+            : col.cell;
         return col;
     });
     const updateColumnCustomFilter = (id, filterFn) => {
@@ -32456,5 +32723,5 @@ function Title({ children, className, size, ...props }) {
     return (jsxRuntimeExports$1.jsx("span", { className: title({ size, className }), ...props, children: children }));
 }
 
-export { Accordion, Avatar, badge$1 as Badge, Body, Box, Button$1 as Button, Calendar, Checkbox, Command, Container, DataTable, Dialog, Display, DropdownMenu, EmptyState, ErrorState, Flex, Grid, Headline, Image, InputField, Label, Link, Popover, RSelect, Radio, ScrollArea, Select, Separator, Sheet, Sidebar, Switch, Table, Tabs, Text, TextField, Textarea, ThemeProvider, ThemeSwitcher, Title, ToggleGroup, Tooltip, useTable, useTheme };
+export { Accordion, Avatar, badge$1 as Badge, Body, Box, Button$1 as Button, Calendar, Checkbox, Command, Container, DataTable, DatePicker, Dialog, Display, DropdownMenu, EmptyState, ErrorState, Flex, Grid, Headline, Image, InputField, Label, Link, Popover, RSelect, Radio, RangePicker, ScrollArea, Select, Separator, Sheet, Sidebar, Switch, Table, Tabs, Text, TextField, Textarea, ThemeProvider, ThemeSwitcher, Title, ToggleGroup, Tooltip, useTable, useTheme };
 //# sourceMappingURL=index.js.map