@majoo-ui/react 1.53.1 → 1.54.0

package/index.esm.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useCallback, useReducer } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { Portal } from '@majoo-ui/helpers';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -2497,7 +2498,429 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$z = ["children", "isCollapse", "css", "contentHeader"];
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+
+    const listener = () => {
+      setMatches(media.matches);
+    };
+
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
+const StyledSkeleton = props => {
+  const {
+    color,
+    count,
+    width,
+    size,
+    circle
+  } = props;
+
+  function getBaseColor(color) {
+    switch (color) {
+      case 'primary':
+        return colors$4.gray300;
+
+      default:
+        return colors$4.gray150;
+    }
+  }
+
+  function getSize(size) {
+    switch (size) {
+      case 'md':
+        return 16;
+
+      case 'lg':
+        return 118;
+
+      default:
+        return 12;
+    }
+  }
+
+  return jsx(SkeletonTheme, Object.assign({
+    width: width,
+    borderRadius: size === 'lg' ? 0 : 20,
+    baseColor: getBaseColor(color),
+    highlightColor: "#FAFAFA"
+  }, {
+    children: jsx(ReactSkeleton, {
+      height: getSize(size),
+      count: count,
+      circle: circle
+    }, void 0)
+  }), void 0);
+};
+
+const Card$1 = styled('div', {
+  padding: 40,
+  borderRadius: 8,
+  background: '$bgWhite',
+  boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)',
+  position: 'relative'
+});
+const Space = styled('div', {
+  height: 8,
+  variants: {
+    size: {
+      sm: {
+        height: 8
+      },
+      md: {
+        height: 18
+      }
+    }
+  }
+});
+function Skeleton() {
+  const isDesktop = useMediaQuery('(min-width: 767px)');
+
+  if (isDesktop) {
+    return jsxs(Grid, Object.assign({
+      columns: 6,
+      gapY: 5
+    }, {
+      children: [jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxs(Grid, Object.assign({
+          columns: 6,
+          gapX: 2
+        }, {
+          children: [jsx(GridItem, Object.assign({
+            colSpan: 2
+          }, {
+            children: jsxs(Card$1, {
+              children: [jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0)]
+            }, void 0)
+          }), void 0), jsx(GridItem, Object.assign({
+            colSpan: 2
+          }, {
+            children: jsxs(Card$1, {
+              children: [jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0)]
+            }, void 0)
+          }), void 0), jsx(GridItem, Object.assign({
+            colSpan: 2
+          }, {
+            children: jsxs(Card$1, {
+              children: [jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0)]
+            }, void 0)
+          }), void 0)]
+        }), void 0)
+      }), void 0), jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsx(Card$1, {
+          children: jsxs(Grid, Object.assign({
+            columns: 6,
+            gapY: 5
+          }, {
+            children: [jsx(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: jsxs(Grid, Object.assign({
+                columns: 6,
+                gapX: 2
+              }, {
+                children: [jsxs(GridItem, Object.assign({
+                  colSpan: 2
+                }, {
+                  children: [jsx(StyledSkeleton, {
+                    size: "lg"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsx(StyledSkeleton, {
+                    size: "md",
+                    color: "primary",
+                    width: "85%"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsxs(Box, {
+                    children: [jsx(StyledSkeleton, {
+                      width: "85%"
+                    }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                      width: "60%"
+                    }, void 0)]
+                  }, void 0)]
+                }), void 0), jsxs(GridItem, Object.assign({
+                  colSpan: 2
+                }, {
+                  children: [jsx(StyledSkeleton, {
+                    size: "lg"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsx(StyledSkeleton, {
+                    size: "md",
+                    color: "primary",
+                    width: "85%"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsxs(Box, {
+                    children: [jsx(StyledSkeleton, {
+                      width: "85%"
+                    }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                      width: "60%"
+                    }, void 0)]
+                  }, void 0)]
+                }), void 0), jsxs(GridItem, Object.assign({
+                  colSpan: 2
+                }, {
+                  children: [jsx(StyledSkeleton, {
+                    size: "lg"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsx(StyledSkeleton, {
+                    size: "md",
+                    color: "primary",
+                    width: "85%"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsxs(Box, {
+                    children: [jsx(StyledSkeleton, {
+                      width: "85%"
+                    }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                      width: "60%"
+                    }, void 0)]
+                  }, void 0)]
+                }), void 0)]
+              }), void 0)
+            }), void 0), jsxs(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: [jsx(StyledSkeleton, {
+                width: "50%"
+              }, void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "95%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "95%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "95%"
+                }, void 0)]
+              }), void 0)]
+            }), void 0)]
+          }), void 0)
+        }, void 0)
+      }), void 0)]
+    }), void 0);
+  } else {
+    return jsxs(Grid, Object.assign({
+      columns: 6,
+      gapY: 4
+    }, {
+      children: [jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxs(Card$1, {
+          children: [jsx(StyledSkeleton, {
+            size: "md",
+            color: "primary"
+          }, void 0), jsx(Space, {
+            size: "md"
+          }, void 0), jsxs(Box, {
+            children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+              width: "60%"
+            }, void 0)]
+          }, void 0), jsx(Space, {
+            size: "md"
+          }, void 0), jsxs(Box, {
+            children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+              width: "60%"
+            }, void 0)]
+          }, void 0)]
+        }, void 0)
+      }), void 0), jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsx(Card$1, {
+          children: jsxs(Grid, {
+            children: [jsxs(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: [jsx(StyledSkeleton, {
+                size: "lg"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary",
+                width: "85%"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {
+                  width: "85%"
+                }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0)]
+            }), void 0), jsxs(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: [jsx(StyledSkeleton, {
+                width: "50%"
+              }, void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "85%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "85%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "85%"
+                }, void 0)]
+              }), void 0)]
+            }), void 0)]
+          }, void 0)
+        }, void 0)
+      }), void 0)]
+    }), void 0);
+  }
+}
+
+const _excluded$z = ["children", "isCollapse", "css", "contentHeader", "isLoading"];
 var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
 const StyledDiv$3 = styled(Flex$1, {
   justifyContent: 'center',
@@ -2525,7 +2948,8 @@ const PageContainer = _ref => {
     children,
     isCollapse,
     css,
-    contentHeader
+    contentHeader,
+    isLoading
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
@@ -2538,10 +2962,17 @@ const PageContainer = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 28,
+      lineNumber: 29,
       columnNumber: 5
     }
-  }), contentHeader, children);
+  }), isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$_,
+      lineNumber: 31,
+      columnNumber: 9
+    }
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, contentHeader, children));
 };
 
 PageContainer.displayName = 'PageContainer';
@@ -3922,7 +4353,10 @@ const ButtonTableMenu = {
   }
 };
 const StyledIcon$2 = styled('div', {
-  verticalAlign: 'middle'
+  verticalAlign: 'middle',
+  '& svg': {
+    verticalAlign: 'middle'
+  }
 });
 const StyledIconLeft$4 = styled('div', {
   marginRight: '$spacing-03',
@@ -11740,7 +12174,15 @@ const StyledList = styled(TabsPrimitive.List, {
   flexShrink: 0,
   display: 'flex',
   borderBottom: '$medium',
-  boxShadow: '$medium'
+  boxShadow: '$medium',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  scrollBehavior: 'smooth',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  }
 });
 const StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
   all: 'unset',
@@ -11807,6 +12249,47 @@ const StyledContent$5 = styled(TabsPrimitive.Content, {
   outline: 'none',
   boxShadow: '$medium'
 });
+const ScrollButton = styled(Button$3, {
+  width: '28px',
+  '&:hover': {
+    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
+  },
+  variants: {
+    position: {
+      left: {
+        '& svg': {
+          marginTop: '-1px',
+          marginLeft: '-2px'
+        }
+      },
+      right: {
+        '& svg': {
+          marginTop: 0,
+          marginLeft: 0
+        }
+      }
+    }
+  }
+});
+const ScrollButtonContainer = styled(Box, {
+  size: '28px',
+  position: 'absolute',
+  zIndex: '$sticky',
+  borderRadius: '$md',
+  top: '8px',
+  variants: {
+    position: {
+      left: {
+        left: '8px',
+        boxShadow: '10px 0 8px 2px rgba(255,255,255,1), -6px 0 8px 2px rgba(255,255,255,1)'
+      },
+      right: {
+        right: '8px',
+        boxShadow: '6px 0 8px 2px rgba(255,255,255,1), -10px 0 8px 2px rgba(255,255,255,1)'
+      }
+    }
+  }
+});
 const Tabs$1 = _ref => {
   let {
     children
@@ -11822,7 +12305,7 @@ const Tabs$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 108,
+      lineNumber: 162,
       columnNumber: 5
     }
   }), addPropsToChildren(children, {
@@ -11836,16 +12319,94 @@ const TabsList$1 = _ref2 => {
   } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
-  return /*#__PURE__*/React__default.createElement(StyledList, _extends({}, props, {
+  const [listContainerScrollPosition, setlistContainerScrollPosition] = useState(0);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
+  const listContainerRef = useRef();
+  useLayoutEffect(() => {
+    if (listContainerRef && listContainerRef.current) {
+      setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+    }
+  }, [listContainerRef, activeTabs]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    css: {
+      position: 'relative'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 121,
-      columnNumber: 10
+      lineNumber: 184,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledList, _extends({}, props, {
+    ref: listContainerRef,
+    onScroll: e => setlistContainerScrollPosition(e.target.scrollLeft),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 185,
+      columnNumber: 7
     }
   }), addPropsToChildren(children, {
     activeTabs
-  }));
+  })), listContainerScrollPosition > 10 && /*#__PURE__*/React__default.createElement(ScrollButtonContainer, {
+    position: "left",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 189,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ScrollButton, {
+    position: "left",
+    type: "button",
+    buttonType: "ghost",
+    size: "xs",
+    icon: true,
+    onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 190,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
+    color: colors$4.iconGreen,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 198,
+      columnNumber: 13
+    }
+  }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default.createElement(ScrollButtonContainer, {
+    position: "right",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 203,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ScrollButton, {
+    position: "right",
+    type: "button",
+    buttonType: "ghost",
+    size: "xs",
+    icon: true,
+    onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 204,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
+    color: colors$4.iconGreen,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 212,
+      columnNumber: 13
+    }
+  }))));
 };
 const TabsTrigger$1 = _ref3 => {
   let {
@@ -11863,7 +12424,7 @@ const TabsTrigger$1 = _ref3 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 127,
+      lineNumber: 223,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -11876,14 +12437,14 @@ const TabsTrigger$1 = _ref3 => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 131,
+        lineNumber: 227,
         columnNumber: 11
       }
     }, wrappedChildren),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 128,
+      lineNumber: 224,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11895,7 +12456,7 @@ const TabsTrigger$1 = _ref3 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 136,
+      lineNumber: 232,
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
@@ -11909,7 +12470,7 @@ const TabsContent$1 = _ref4 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 154,
+      lineNumber: 250,
       columnNumber: 58
     }
   }));
@@ -14225,25 +14786,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.Content;
 
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const media = window.matchMedia(query);
-
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
-
-    const listener = () => {
-      setMatches(media.matches);
-    };
-
-    media.addEventListener('change', listener);
-    return () => media.removeEventListener('change', listener);
-  }, [matches, query]);
-  return matches;
-}
-
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {});
 const Item$1 = styled(ButtonGroupItem, {
   fontSize: '$label',
@@ -22554,12 +23096,13 @@ const Upload = ({
         handleUpload(files);
       } else {
         if (onBeforeCrop) {
-          var _files$;
+          var _files$, _files$2;
 
           // program to get the dimensions of an image
           const img = document.createElement('img');
           img.src = URL.createObjectURL(files[0]);
           img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
+          img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
 
           img.onload = () => {
             var _onBeforeCrop, _onBeforeCrop$then;
@@ -22747,7 +23290,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 607,
+        lineNumber: 608,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22757,7 +23300,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 608,
+        lineNumber: 609,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22773,7 +23316,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 618,
+            lineNumber: 619,
             columnNumber: 16
           }
         });
@@ -22785,7 +23328,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 621,
+          lineNumber: 622,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22795,7 +23338,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 622,
+          lineNumber: 623,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22804,7 +23347,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 624,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22817,7 +23360,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 625,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22826,7 +23369,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 632,
+          lineNumber: 633,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22836,7 +23379,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 635,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22855,7 +23398,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 645,
+            lineNumber: 646,
             columnNumber: 16
           }
         });
@@ -22866,7 +23409,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 648,
+          lineNumber: 649,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22876,7 +23419,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 650,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22885,7 +23428,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 651,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22898,7 +23441,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 652,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22908,14 +23451,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 659,
+          lineNumber: 660,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 660,
+          lineNumber: 661,
           columnNumber: 17
         }
       }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -22923,7 +23466,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 661,
+          lineNumber: 662,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22938,7 +23481,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 662,
+          lineNumber: 663,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22951,7 +23494,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 677,
+          lineNumber: 678,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22960,7 +23503,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 686,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22968,7 +23511,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 688,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22984,7 +23527,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 699,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22998,7 +23541,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 700,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -23024,7 +23567,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 701,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -23032,14 +23575,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 714,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 714,
+        lineNumber: 715,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -23052,7 +23595,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 723,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -23068,7 +23611,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 723,
+        lineNumber: 724,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -23080,21 +23623,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 735,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 736,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 737,
+        lineNumber: 738,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -23103,7 +23646,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 738,
+        lineNumber: 739,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -23111,7 +23654,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 739,
+        lineNumber: 740,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -23121,14 +23664,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 741,
+        lineNumber: 742,
         columnNumber: 17
       }
     }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 748,
+        lineNumber: 749,
         columnNumber: 19
       }
     }, error));
@@ -23139,7 +23682,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 755,
+        lineNumber: 756,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -23147,7 +23690,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 756,
+        lineNumber: 757,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -23155,7 +23698,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 757,
+        lineNumber: 758,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -23168,7 +23711,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 760,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -23180,7 +23723,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 762,
+        lineNumber: 763,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -23191,7 +23734,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 763,
+        lineNumber: 764,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -23205,14 +23748,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 765,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 767,
+        lineNumber: 768,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23224,14 +23767,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 769,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 770,
+        lineNumber: 771,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -23239,7 +23782,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 772,
+        lineNumber: 773,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -23251,7 +23794,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 773,
+        lineNumber: 774,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23259,7 +23802,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 781,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -23268,7 +23811,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 782,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -23276,7 +23819,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 784,
+        lineNumber: 785,
         columnNumber: 15
       }
     }, "Simpan")))));
@@ -23292,7 +23835,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 793,
+      lineNumber: 794,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -23301,7 +23844,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 796,
+      lineNumber: 797,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -23668,12 +24211,12 @@ const Device = props => {
   };
 
   React.useEffect(() => {
-    if (props.withComponent) {
+    if (props.withComponent || (props === null || props === void 0 ? void 0 : props.variant)) {
       setTimeout(() => {
         setRender(prev => prev + 1);
       }, 100);
     }
-  }, [props.withComponent]);
+  }, [props.withComponent, props === null || props === void 0 ? void 0 : props.variant]);
 
   const renderVariant = variant => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -28731,9 +29274,11 @@ function PrimitiveLoadingBar({
   progress,
   description,
   showProgressOnly,
-  css
+  css,
+  visibility,
+  colors
 }) {
-  return jsxs(Container$4, Object.assign({
+  return visibility && jsxs(Container$4, Object.assign({
     css: css
   }, {
     children: [jsx(Progress, Object.assign({
@@ -28742,6 +29287,9 @@ function PrimitiveLoadingBar({
       children: jsx(ProgressIndicator$1, {
         style: {
           transform: `translateX(-${100 - progress}%)`
+        },
+        css: {
+          background: (colors === null || colors === void 0 ? void 0 : colors.length) > 1 ? `linear-gradient(90deg, ${colors === null || colors === void 0 ? void 0 : colors[0]} 35%, ${colors === null || colors === void 0 ? void 0 : colors[1]} 100%)` : colors === null || colors === void 0 ? void 0 : colors[0]
         }
       }, void 0)
     }), void 0), !showProgressOnly && jsx(ProgressText, {
@@ -28755,36 +29303,46 @@ let interval;
 function LoadingBar(props) {
   const {
     show,
-    isAuto,
     onCompleted
   } = props;
   const [progress, setProgress] = useState(0);
+  const [visibility, setVisibility] = useState(false);
   useEffect(() => {
     if (show) {
+      setVisibility(true);
       interval = setInterval(() => {
-        setProgress(prev => prev + 2);
-      }, 500);
+        setProgress(prev => prev + 1);
+      }, 100);
     } else {
       setProgress(100);
       clearInterval(interval);
-      onCompleted && onCompleted();
+      setTimeout(() => {
+        setVisibility(false);
+        setProgress(0);
+      }, 1000);
     }
-  }, [show, onCompleted]);
+  }, [show]);
   useEffect(() => {
     if (progress === 100) {
       clearInterval(interval);
-    }
-  }, [progress]);
-  return isAuto ? jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+      onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
+      setTimeout(() => {
+        setVisibility(false);
+        setProgress(0);
+      }, 1000);
+    }
+  }, [progress, onCompleted]);
+  return typeof (props === null || props === void 0 ? void 0 : props.progress) === 'number' ? jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+    visibility: true
+  }), void 0) : jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+    visibility: visibility,
     progress: progress
-  }), void 0) : jsx(PrimitiveLoadingBar, Object.assign({}, props), void 0);
+  }), void 0);
 }
 
 LoadingBar.defaultProps = {
   showProgressOnly: false,
-  isAuto: false,
   show: false,
-  progress: 0,
   description: 'Loading...'
 };
 
@@ -32529,4 +33087,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };