@paygreen/pgui 2.14.9 → 2.14.10

package/dist/esm/index.js

@@ -20077,7 +20077,7 @@ var ModalResponsive = function (_a) {
                 React__default.createElement(DrawerCloseButton, null),
                 children)));
     }
-    return (React__default.createElement(Modal, __assign$2({ isOpen: isOpen, onClose: onClose, finalFocusRef: finalFocusRef, isCentered: true }, rest),
+    return (React__default.createElement(Modal, __assign$2({ isOpen: isOpen, onClose: onClose, finalFocusRef: finalFocusRef, isCentered: true, scrollBehavior: "inside" }, rest),
         React__default.createElement(ModalOverlay, null),
         React__default.createElement(ModalContent, null,
             React__default.createElement(ModalCloseButton, null),
@@ -59930,61 +59930,6 @@ var BottomBar = function (props) {
     return (React__default.createElement(LayoutContainer, __assign$2({ minH: "4.125rem", bg: bg, boxShadow: "layout", justifyContent: "space-between", alignItems: "center" }, props)));
 };
 
-var chakraStyle = function () { return ({
-    'div[data-popper-placement]': {
-        minWidth: 'auto !important'
-    }
-}); };
-
-var reactDayPicker = {
-    '.rdp': {
-        '--rdp-cell-size': '30px',
-        '--rdp-caption-font-size': 'var(--chakra-sizes-3-5)',
-        '--rdp-accent-color': 'var(--chakra-colors-blue-100)',
-        '--rdp-background-color': 'var(--chakra-colors-gray-200)',
-        '--rdp-outline': '0px',
-        '--rdp-outline-selected': '0px',
-        '--rdp-selected-color': 'var(--chakra-colors-gray-800)',
-        '[data-theme="dark"] &': {
-            '--rdp-accent-color': 'var(--chakra-colors-blue-800)',
-            '--rdp-background-color': 'var(--chakra-colors-gray-600)',
-            '--rdp-selected-color': 'var(--chakra-colors-gray-50)'
-        }
-    },
-    '.rdp-dropdown': {
-        appearance: 'none',
-        backgroundColor: 'var(--chakra-colors-gray-50)',
-        '[data-theme="dark"] &': {
-            backgroundColor: 'var(--chakra-colors-gray-800)'
-        }
-    }
-};
-
-var scrollbarStyles = function () {
-    var colorMode = useColorMode().colorMode;
-    var trackColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.10)' : 'rgba(255, 255, 255, 0.10)';
-    var thumbColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(255, 255, 255, 0.25)';
-    return {
-        // WebKit browsers
-        '&::-webkit-scrollbar': {
-            width: '0.4rem',
-            borderRadius: '9999px',
-            backgroundColor: trackColor
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: thumbColor,
-            borderRadius: '9999px'
-        }
-    };
-};
-
-var rawStyle = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  chakraStyle: chakraStyle,
-  reactDayPicker: reactDayPicker,
-  scrollbarStyles: scrollbarStyles
-});
-
 var SideNav = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose; _a.onToggle; var breakpoint = _a.breakpoint, children = _a.children, props = __rest$2(_a, ["isOpen", "onClose", "onToggle", "breakpoint", "children"]);
     var theme = useTheme();
@@ -60000,12 +59945,12 @@ var SideNav = function (_a) {
     if (isMobile) {
         return (React__default.createElement(Drawer, { isOpen: isOpen, placement: "left", onClose: onClose, size: "nav" },
             React__default.createElement(DrawerOverlay, null),
-            React__default.createElement(DrawerContent, __assign$2({ bgGradient: bgGradient, color: "white", pt: 6, px: 6, overflow: "auto", sx: scrollbarStyles() }, props),
+            React__default.createElement(DrawerContent, __assign$2({ bgGradient: bgGradient, color: "white", pt: 6, px: 6, overflow: "auto" }, props),
                 React__default.createElement(DrawerCloseButton, null),
                 children)));
     }
     var flexBgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
-    return (React__default.createElement(Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: useColorModeValue('white', 'gray.50'), pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: scrollbarStyles(), transform: !isOpen ? 'translateX(-18rem)' : 'none', transition: '0.4s ease-in-out' }, props), children));
+    return (React__default.createElement(Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: useColorModeValue('white', 'gray.50'), pt: 6, px: 6, position: "fixed", top: "0", left: "0", transform: !isOpen ? 'translateX(-18rem)' : 'none', transition: '0.4s ease-in-out' }, props), children));
 };
 var SideNavContainer = function (props) { return (React__default.createElement(VStack, __assign$2({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
 var SideNavHeader = function (_a) {
@@ -60014,7 +59959,7 @@ var SideNavHeader = function (_a) {
 };
 var SideNavBody = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
-    return (React__default.createElement(VStack, __assign$2({ pt: 4, spacing: 5, pr: 2, alignItems: "inherit", overflowY: "auto", sx: scrollbarStyles() }, rest), children));
+    return (React__default.createElement(VStack, __assign$2({ pt: 4, spacing: 5, pr: 2, alignItems: "inherit", overflowY: "auto" }, rest), children));
 };
 var SideNavFooter = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
@@ -60780,6 +60725,61 @@ var typography = {
 
 var foundations = __assign$2(__assign$2({ colors: colors }, typography), { sizes: sizes, shadows: shadows, radii: radii });
 
+var chakraStyle = function () { return ({
+    'div[data-popper-placement]': {
+        minWidth: 'auto !important'
+    }
+}); };
+
+var reactDayPicker = {
+    '.rdp': {
+        '--rdp-cell-size': '30px',
+        '--rdp-caption-font-size': 'var(--chakra-sizes-3-5)',
+        '--rdp-accent-color': 'var(--chakra-colors-blue-100)',
+        '--rdp-background-color': 'var(--chakra-colors-gray-200)',
+        '--rdp-outline': '0px',
+        '--rdp-outline-selected': '0px',
+        '--rdp-selected-color': 'var(--chakra-colors-gray-800)',
+        '[data-theme="dark"] &': {
+            '--rdp-accent-color': 'var(--chakra-colors-blue-800)',
+            '--rdp-background-color': 'var(--chakra-colors-gray-600)',
+            '--rdp-selected-color': 'var(--chakra-colors-gray-50)'
+        }
+    },
+    '.rdp-dropdown': {
+        appearance: 'none',
+        backgroundColor: 'var(--chakra-colors-gray-50)',
+        '[data-theme="dark"] &': {
+            backgroundColor: 'var(--chakra-colors-gray-800)'
+        }
+    }
+};
+
+var scrollbarStyles = function () {
+    var colorMode = useColorMode().colorMode;
+    var trackColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.10)' : 'rgba(255, 255, 255, 0.10)';
+    var thumbColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(255, 255, 255, 0.25)';
+    return {
+        // WebKit browsers
+        '&::-webkit-scrollbar': {
+            width: '0.4rem',
+            borderRadius: '9999px',
+            backgroundColor: trackColor
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: thumbColor,
+            borderRadius: '9999px'
+        }
+    };
+};
+
+var rawStyle = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  chakraStyle: chakraStyle,
+  reactDayPicker: reactDayPicker,
+  scrollbarStyles: scrollbarStyles
+});
+
 var externalsStyles = function (props) {
     return Object.values(rawStyle).reduce(function (acc, cur) { return (__assign$2(__assign$2({}, acc), (typeof cur === 'function' ? cur(props) : cur))); }, {});
 };