@raystack/apsara 0.13.0 → 0.14.1

package/dist/index.cjs

@@ -23,6 +23,8 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var $7SXl2$reactdom__namespace = /*#__PURE__*/_interopNamespaceDefault($7SXl2$reactdom);
 
+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;
 }
@@ -2402,11 +2404,33 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   return target;
 }
 
-var _excluded$e = ["color"];
-var ArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+var _excluded$I = ["color"];
+var CalendarIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$I);
+
+  return React.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
+  }), React.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$N = ["color"];
+var CaretDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$N);
 
   return React.createElement("svg", Object.assign({
     width: "15",
@@ -2417,18 +2441,18 @@ var ArrowDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef)
   }, props, {
     ref: forwardedRef
   }), React.createElement("path", {
-    d: "M7.5 2C7.77614 2 8 2.22386 8 2.5L8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.75979 12.9473 7.63261 13 7.5 13C7.36739 13 7.24021 12.9473 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 2.5C7 2.22386 7.22386 2 7.5 2Z",
+    d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
     fill: color,
     fillRule: "evenodd",
     clipRule: "evenodd"
   }));
 });
 
-var _excluded$j = ["color"];
-var ArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+var _excluded$Q = ["color"];
+var CaretSortIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$Q);
 
   return React.createElement("svg", Object.assign({
     width: "15",
@@ -2439,7 +2463,29 @@ var ArrowUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   }, props, {
     ref: forwardedRef
   }), React.createElement("path", {
-    d: "M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z",
+    d: "M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$R = ["color"];
+var CaretUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$R);
+
+  return React.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
+  }), React.createElement("path", {
+    d: "M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z",
     fill: color,
     fillRule: "evenodd",
     clipRule: "evenodd"
@@ -9719,8 +9765,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"};
@@ -10035,7 +10081,8 @@ const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f
 
 var styles$i = {"popover":"popover-module_popover__Jh8Hg"};
 
-const PopoverContent = React.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.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,
@@ -28121,7 +28168,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 }) {
@@ -28145,10 +28192,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 = React.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] = React.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] = React.useState(false);
+    const [currentRangeField, setCurrentRangeField] = React.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
  *
@@ -31627,43 +31764,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 = React.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]: [
         {
@@ -31779,25 +31914,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] = React.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] = React.useState({
+        value: "",
+        date: new Date(),
+        dateRange: {
+            to: new Date(),
+            from: new Date(),
+        },
+    });
+    const valueType = getFilterValueType({ filterOperation, columnType });
     React.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] = React.useState(options?.[0].value);
+    const [value, setValue] = React.useState(options?.[0]?.value);
     React.useEffect(() => {
         const selectedOption = options.find((o) => o.value === value);
         if (selectedOption) {
@@ -31829,7 +32024,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) {
@@ -31935,7 +32130,98 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, ShouldShowHeader = true, ...props }) {
+/**
+ * @internal
+ */
+const SkeletonThemeContext = React.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.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.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.createElement(React.Fragment, { key: i },
+                skeletonSpan,
+                React.createElement("br", null)));
+        }
+    }
+    return (React.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.createElement(Wrapper, { key: i }, el))
+        : elements));
+}
+
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = React.useState({});
     const convertedChildren = React.Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -31954,6 +32240,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) => {
@@ -32002,14 +32291,16 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, Shoul
             }, children: [jsxRuntimeExports$1.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports$1.jsxs(Flex, { className: styles$4.tableContainer, style: parentStyle, children: [jsxRuntimeExports$1.jsxs(Table, { ...props, style: tableStyle, children: [jsxRuntimeExports$1.jsx(Table.Header, { children: ShouldShowHeader
                                                 ? table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports$1.jsx(Table.Row, { children: headerGroup.headers.map((header, index) => {
                                                         return (jsxRuntimeExports$1.jsx(Table.Head, { style: {
+                                                                cursor: "pointer",
                                                                 ...(header.column.columnDef?.meta?.style ?? {}),
-                                                            }, children: jsxRuntimeExports$1.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
+                                                            }, onClick: header.column.getToggleSortingHandler(), children: jsxRuntimeExports$1.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
                                                                         ? null
-                                                                        : flexRender(header.column.columnDef.header, header.getContext()), {
-                                                                        asc: jsxRuntimeExports$1.jsx(ArrowUpIcon, {}),
-                                                                        desc: jsxRuntimeExports$1.jsx(ArrowDownIcon, {}),
-                                                                    }[header.column.getIsSorted()] ??
-                                                                        null] }) }, `${header.id}_${index}`));
+                                                                        : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort()
+                                                                        ? {
+                                                                            asc: jsxRuntimeExports$1.jsx(CaretUpIcon, {}),
+                                                                            desc: jsxRuntimeExports$1.jsx(CaretDownIcon, {}),
+                                                                        }[header.column.getIsSorted()] ?? jsxRuntimeExports$1.jsx(CaretSortIcon, {})
+                                                                        : null] }) }, `${header.id}_${index}`));
                                                     }) }, headerGroup.id)))
                                                 : null }), jsxRuntimeExports$1.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports$1.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell, index) => (jsxRuntimeExports$1.jsx(Table.Cell, { style: {
                                                         ...(cell.column.columnDef?.meta?.style ?? {}),
@@ -32487,6 +32778,7 @@ exports.Checkbox = Checkbox;
 exports.Command = Command;
 exports.Container = Container;
 exports.DataTable = DataTable;
+exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Display = Display;
 exports.DropdownMenu = DropdownMenu;
@@ -32502,6 +32794,7 @@ exports.Link = Link;
 exports.Popover = Popover;
 exports.RSelect = RSelect;
 exports.Radio = Radio;
+exports.RangePicker = RangePicker;
 exports.ScrollArea = ScrollArea;
 exports.Select = Select;
 exports.Separator = Separator;