@paygreen/pgui 2.14.6 → 2.14.8

package/dist/cjs/index.js

@@ -206,7 +206,7 @@ var ActionsButton = react.forwardRef(function (_a, ref) {
 ActionsButton.displayName = 'ActionsButton';
 
 var Card = function (props) {
-    var bgColor = react.useColorModeValue('white', 'gray.900');
+    var bgColor = react.useColorModeValue('white', 'whiteAlpha.50');
     var borderColor = react.useColorModeValue('gray.100', 'gray.700');
     return (React__default["default"].createElement(react.Card, __assign$2({ p: 6, backgroundColor: bgColor, borderWidth: "1px", borderStyle: "solid", borderColor: borderColor, h: "fit-content", w: "full" }, props)));
 };
@@ -345,7 +345,7 @@ var DataListAccordionIcon = function (_a) {
 };
 var DataListAccordionPanel = function (_a) {
     var rest = __rest$2(_a, []);
-    return (React__default["default"].createElement(react.AccordionPanel, __assign$2({ boxShadow: "inner", px: "4", py: "3", bg: "gray.50", _dark: { bg: 'gray.900' } }, rest)));
+    return (React__default["default"].createElement(react.AccordionPanel, __assign$2({ boxShadow: "inner", px: "4", py: "3", bg: "gray.50", _dark: { bg: 'gray.800' } }, rest)));
 };
 var DataListRow = function (_a) {
     var _b = _a.isVisible, isVisible = _b === void 0 ? true : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, rest = __rest$2(_a, ["isVisible", "isDisabled"]);
@@ -381,7 +381,7 @@ var DataListFooter = function (_a) {
     var rest = __rest$2(_a, []);
     return (React__default["default"].createElement(react.Box, { mt: "auto" },
         React__default["default"].createElement(react.Flex, __assign$2({ fontSize: "sm", mt: "-1px", borderTop: "1px solid", p: "2", align: "center", bg: "white", borderTopColor: "gray.100", color: "gray.600", _dark: {
-                bg: 'blackAlpha.50',
+                bg: 'whiteAlpha.50',
                 color: 'gray.300',
                 borderTopColor: 'gray.900'
             } }, rest))));
@@ -394,7 +394,7 @@ var DataList = function (_a) {
             columns: columns,
             isHover: isHover
         } },
-        React__default["default"].createElement(react.Accordion, __assign$2({ border: "2px solid", borderBottom: "none", borderColor: react.useColorModeValue('gray.100', 'gray.700'), borderRadius: "md", display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", overflow: "hidden", allowMultiple: !allowToggle ? allowMultiple : false, allowToggle: allowToggle, bg: react.useColorModeValue('white', 'gray.900') }, rest))));
+        React__default["default"].createElement(react.Accordion, __assign$2({ border: "2px solid", borderBottom: "none", borderColor: react.useColorModeValue('gray.100', 'gray.700'), borderRadius: "md", display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", overflow: "hidden", allowMultiple: !allowToggle ? allowMultiple : false, allowToggle: allowToggle, bg: react.useColorModeValue('white', 'whiteAlpha.50') }, rest))));
 };
 
 var FormGroup = function (_a) {
@@ -59956,6 +59956,26 @@ var BottomBar = function (props) {
     return (React__default["default"].createElement(LayoutContainer, __assign$2({ minH: "4.125rem", bg: bg, boxShadow: "layout", justifyContent: "space-between", alignItems: "center" }, props)));
 };
 
+var useCustomScrollbar = function (options) {
+    var colorMode = react.useColorMode().colorMode;
+    var scrollbarStyles = {
+        '&::-webkit-scrollbar': {
+            width: options.width || '0.7rem',
+            borderRadius: '9999px',
+            backgroundColor: colorMode === 'light'
+                ? options.trackColorLight
+                : options.trackColorDark
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: colorMode === 'light'
+                ? options.thumbColorLight
+                : options.thumbColorDark,
+            borderRadius: '9999px'
+        }
+    };
+    return scrollbarStyles;
+};
+
 var dateFormat = 'dd/MM/yyyy';
 
 var useIsMobile = function (currentBreakpoint) {
@@ -59974,17 +59994,12 @@ var SideNav = function (_a) {
     var useColorModeValue = function (light, dark) {
         return colorMode === 'light' ? light : dark;
     };
-    var customScrollBar = {
-        '&::-webkit-scrollbar': {
-            width: '0.7rem',
-            borderRadius: '9999px',
-            backgroundColor: useColorModeValue('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: useColorModeValue('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)'),
-            borderRadius: '9999px'
-        }
-    };
+    var customScrollBar = useCustomScrollbar({
+        trackColorLight: 'rgba(0, 0, 0, 0.05)',
+        trackColorDark: 'rgba(255, 255, 255, 0.05)',
+        thumbColorLight: 'rgba(0, 0, 0, 0.10)',
+        thumbColorDark: 'rgba(255, 255, 255, 0.10)'
+    });
     var bgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
     if (isMobile) {
         return (React__default["default"].createElement(react.Drawer, { isOpen: isMobileMenuOpen, placement: "left", onClose: onMobileMenuClose, size: "nav" },
@@ -59995,7 +60010,7 @@ var SideNav = function (_a) {
     }
     var flexBgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
     var color = useColorModeValue('white', 'gray.50');
-    return (React__default["default"].createElement(react.Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: color, pt: 6, px: 6, overflow: "auto", position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
+    return (React__default["default"].createElement(react.Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: color, pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
 };
 var SideNavContainer = function (props) { return (React__default["default"].createElement(react.VStack, __assign$2({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
 var SideNavHeader = function (_a) {
@@ -60004,7 +60019,13 @@ var SideNavHeader = function (_a) {
 };
 var SideNavBody = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
-    return (React__default["default"].createElement(react.VStack, __assign$2({ pt: 4, spacing: 5, alignItems: "inherit" }, rest), children));
+    var customScrollBar = useCustomScrollbar({
+        trackColorLight: 'rgba(0, 0, 0, 0.10)',
+        trackColorDark: 'rgba(255, 255, 255, 0.10)',
+        thumbColorLight: 'rgba(0, 0, 0, 0.15)',
+        thumbColorDark: 'rgba(255, 255, 255, 0.15)'
+    });
+    return (React__default["default"].createElement(react.VStack, __assign$2({ pt: 4, spacing: 5, pr: 1, alignItems: "inherit", overflowY: "auto", sx: customScrollBar }, rest), children));
 };
 var SideNavFooter = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);