@paygreen/pgui 2.14.6 → 2.14.7

package/dist/cjs/index.js

@@ -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"]);
@@ -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"]);