@raystack/apsara 0.20.4 → 0.21.1

package/dist/calendar/calendar.d.ts

@@ -1,8 +1,15 @@
-import { DayPickerProps } from "react-day-picker";
+import { DayPickerProps } from 'react-day-picker';
 interface OnDropdownOpen {
     onDropdownOpen?: VoidFunction;
 }
-export type CalendarProps = DayPickerProps & OnDropdownOpen;
-export declare const Calendar: ({ className, classNames, showOutsideDays, onDropdownOpen, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+interface CalendarPropsExtended {
+    showTooltip?: boolean;
+    tooltipMessages?: {
+        [key: string]: any;
+    };
+    loadingData?: boolean;
+}
+export type CalendarProps = DayPickerProps & OnDropdownOpen & CalendarPropsExtended;
+export declare const Calendar: ({ className, classNames, showOutsideDays, onDropdownOpen, showTooltip, tooltipMessages, loadingData, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=calendar.d.ts.map

package/dist/calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../calendar/calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAa5E,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,cAAc,CAAC;AAmE5D,eAAO,MAAM,QAAQ,yEAMlB,aAAa,4CA2Cf,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../calendar/calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAe1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;AAmExB,eAAO,MAAM,QAAQ,oHASlB,aAAa,4CAsEf,CAAC"}

package/dist/dialog/dialog.d.ts

@@ -8,8 +8,11 @@ export declare const DialogContent: import("react").ForwardRefExoticComponent<Di
     close?: boolean | undefined;
     overlayStyle?: import("react").CSSProperties | undefined;
     overlayClassname?: string | undefined;
+    overlayBlur?: boolean | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
-declare const overlay: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+declare const overlay: (props?: ({
+    blur?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface OverlayProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, VariantProps<typeof overlay> {
 }
 type CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;
@@ -20,6 +23,7 @@ export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps> & {
         close?: boolean | undefined;
         overlayStyle?: import("react").CSSProperties | undefined;
         overlayClassname?: string | undefined;
+        overlayBlur?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Close: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Title: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,cAAc,EACd,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,aAAa,yFAA4B,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,aAAa;;;;kDA+BzB,CAAC;AAEF,QAAA,MAAM,OAAO,yFAAsB,CAAC;AACpC,MAAM,WAAW,YACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,OAAO,CAAC;CAAG;AAgBnC,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AACrE,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAMlB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;CAMjB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,cAAc,EACd,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,aAAa,yFAA4B,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,aAAa;;;;;kDAgCzB,CAAC;AAEF,QAAA,MAAM,OAAO;;mFAMX,CAAC;AACH,MAAM,WAAW,YACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,OAAO,CAAC;CAAG;AAgBnC,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AACrE,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAMlB;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;CAMjB,CAAC"}

package/dist/index.cjs

@@ -6676,14 +6676,20 @@ const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f76
 const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
 const $5d3850c4d0b4e6c7$export$f39c2d165cd861fe = $5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac;
 
-var styles$t = {"dialogContent":"dialog-module_dialogContent__bljTL","overlay":"dialog-module_overlay__t-jUE","close":"dialog-module_close__n9JNt"};
+var styles$t = {"dialogContent":"dialog-module_dialogContent__bljTL","overlayBlur":"dialog-module_overlayBlur__-RCHk","overlay":"dialog-module_overlay__t-jUE","close":"dialog-module_close__n9JNt"};
 
 const dialogContent = cva(styles$t.dialogContent);
-const DialogContent = React.forwardRef(({ className, children, close, overlayStyle, overlayClassname, ...props }, forwardedRef) => {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$602eac185826482c, { children: jsxRuntimeExports.jsx(Overlay$1, { className: overlayClassname, style: overlayStyle, children: jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ...props, ref: forwardedRef, className: dialogContent({ className }), children: [children, close && (jsxRuntimeExports.jsx(CloseButton$1, { children: jsxRuntimeExports.jsx(Cross1Icon, {}) }))] }) }) }));
+const DialogContent = React.forwardRef(({ className, children, close, overlayStyle, overlayClassname, overlayBlur, ...props }, forwardedRef) => {
+    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$602eac185826482c, { children: jsxRuntimeExports.jsx(Overlay$1, { className: overlayClassname, style: overlayStyle, blur: overlayBlur, children: jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ...props, ref: forwardedRef, className: dialogContent({ className }), children: [children, close && (jsxRuntimeExports.jsx(CloseButton$1, { children: jsxRuntimeExports.jsx(Cross1Icon, {}) }))] }) }) }));
 });
-const overlay$1 = cva(styles$t.overlay);
-const Overlay$1 = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { ref: ref, className: overlay$1({ className }), ...props })));
+const overlay$1 = cva(styles$t.overlay, {
+    variants: {
+        blur: {
+            true: styles$t.overlayBlur,
+        },
+    },
+});
+const Overlay$1 = React.forwardRef(({ className, blur, ...props }, ref) => (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { ref: ref, className: overlay$1({ className, blur }), ...props })));
 Overlay$1.displayName = $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff.displayName;
 const close$1 = cva(styles$t.close);
 function CloseButton$1({ children, className, ...props }) {
@@ -10422,6 +10428,20 @@ const $cb5cc270b50c6fcd$var$PopoverContentNonModal = /*#__PURE__*/ React.forward
         }
     }))));
 });
+/* -------------------------------------------------------------------------------------------------
+ * PopoverClose
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CLOSE_NAME = 'PopoverClose';
+const $cb5cc270b50c6fcd$export$d6ac43ebaa40d53e = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopePopover: __scopePopover , ...closeProps } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CLOSE_NAME, __scopePopover);
+    return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.button, _extends({
+        type: "button"
+    }, closeProps, {
+        ref: forwardedRef,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onClick, ()=>context.onOpenChange(false)
+        )
+    }));
+});
 /* -----------------------------------------------------------------------------------------------*/ function $cb5cc270b50c6fcd$var$getState(open) {
     return open ? 'open' : 'closed';
 }
@@ -10429,6 +10449,7 @@ const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b1
 const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb05d26466c3;
 const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679ffb4362d2d4;
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
+const $cb5cc270b50c6fcd$export$f39c2d165cd861fe = $cb5cc270b50c6fcd$export$d6ac43ebaa40d53e;
 
 var styles$i = {"popover":"popover-module_popover__Jh8Hg"};
 
@@ -10437,6 +10458,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 PopoverContent.displayName = $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2.displayName;
 const Popover = Object.assign($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, {
     Trigger: $cb5cc270b50c6fcd$export$41fb9f06171c75f4,
+    Close: $cb5cc270b50c6fcd$export$f39c2d165cd861fe,
     Content: PopoverContent,
 });
 
@@ -28054,6 +28076,97 @@ function DayPicker(props) {
 
 var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption_label":"calendar-module_caption_label__C5Ys7","dropdowns":"calendar-module_dropdowns__Wn53e","dropdown_trigger":"calendar-module_dropdown_trigger__dsyaq","dropdown_item_text":"calendar-module_dropdown_item_text__Tudqv","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","months":"calendar-module_months__IN75k","nav":"calendar-module_nav__aGeze","month_caption":"calendar-module_month_caption__Ws6Hx","day":"calendar-module_day__rQFGK","disabled":"calendar-module_disabled__jqgRB","outside":"calendar-module_outside__nq5XC","selected":"calendar-module_selected__kiiAZ","range_middle":"calendar-module_range_middle__PmzFi","range_start":"calendar-module_range_start__ZUooG","range_end":"calendar-module_range_end__PKrm7","week":"calendar-module_week__kCvKJ","day_button":"calendar-module_day_button__vCKP1","today":"calendar-module_today__iXQIQ","weekday":"calendar-module_weekday__xzf6F","hidden":"calendar-module_hidden__wqJVo","calendarPopover":"calendar-module_calendarPopover__PY4sa","dropdown_icon":"calendar-module_dropdown_icon__rDTbz","dropdown_content":"calendar-module_dropdown_content__ajJ5V"};
 
+/**
+ * @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));
+}
+
 const root$1 = cva(styles$6.calendarRoot);
 function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
     const [open, setOpen] = React.useState(false);
@@ -28068,19 +28181,25 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
     }
     return (jsxRuntimeExports.jsxs(Select$1, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntimeExports.jsx(Select$1.Trigger, { className: styles$6.dropdown_trigger, iconProps: {
                     className: styles$6.dropdown_icon,
-                }, children: jsxRuntimeExports.jsx(Select$1.Value, {}) }), jsxRuntimeExports.jsxs(Select$1.Content, { className: styles$6.dropdown_content, children: [jsxRuntimeExports.jsx(Select$1.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: "center", children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select$1.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select$1.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
+                }, children: jsxRuntimeExports.jsx(Select$1.Value, {}) }), jsxRuntimeExports.jsxs(Select$1.Content, { className: styles$6.dropdown_content, children: [jsxRuntimeExports.jsx(Select$1.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select$1.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select$1.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
                                 className: styles$6.dropdown_item_text,
-                            }, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select$1.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: "center", children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
+                            }, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select$1.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
 }
-const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, ...props }) {
+const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, showTooltip = false, tooltipMessages = {}, loadingData = false, ...props }) {
     return (jsxRuntimeExports.jsx(DayPicker, { showOutsideDays: showOutsideDays, components: {
             Chevron: (props) => {
-                if (props.orientation === "left") {
+                if (props.orientation === 'left') {
                     return jsxRuntimeExports.jsx(ChevronLeftIcon, { ...props });
                 }
                 return jsxRuntimeExports.jsx(ChevronRightIcon, { ...props });
             },
             Dropdown: (props) => (jsxRuntimeExports.jsx(DropDown, { ...props, onDropdownOpen: onDropdownOpen })),
+            DayButton: (props) => {
+                const { day, ...buttonProps } = props;
+                const message = tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];
+                return (jsxRuntimeExports.jsx(Tooltip, { side: "top", disabled: loadingData || !showTooltip || !message, message: message, children: jsxRuntimeExports.jsx("button", { ...buttonProps }) }));
+            },
+            MonthGrid: (props) => loadingData ? (jsxRuntimeExports.jsx(Skeleton, { count: 6, height: '12px', width: '252px', style: { marginBottom: 'var(--space-5)' }, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" })) : (jsxRuntimeExports.jsx("table", { ...props })),
         }, classNames: {
             caption_label: styles$6.caption_label,
             button_previous: `${styles$6.nav_button} ${styles$6.nav_button_previous}`,
@@ -32138,97 +32257,6 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-/**
- * @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, initialState, loaderRow = 2, onRowClick, onStateChange = () => { }, onLoadMore, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = React.useState({});
     const convertedChildren = React.Children.toArray(children);